00 事件Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
課程大綱
1、事件基礎(chǔ)
2、事件處理函數(shù)
3、事件對象
4、事件默認(rèn)行為及阻止方式
5、Dom2級事件處理程序
6、事件委托機(jī)制
*/
/*
JavaScript事件是由訪問Web頁面的用戶引起的一系列操作。
當(dāng)用戶執(zhí)行某些操作的時候，再去執(zhí)行一系列代碼?；蛘哂脕慝@取事件的詳細(xì)信息，如鼠標(biāo)位置、鍵盤按鍵等。
JavaScript可處理的事件類型為：鼠標(biāo)事件、鍵盤事件、HTML事件
所有的事件處理函數(shù)都會有兩個部分組成，on + 事件名稱
*/
</script>
</head>
<body>
</body>
</html>
01 觸發(fā)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="test">aaa</div>
<script>
var oDiv = document.getElementById("test")
/*
點擊事件
*/
oDiv.onclick = function(){
alert(this.innerText)
}
/*
鼠標(biāo)移入事件 onmouseover （鼠標(biāo)移入時觸發(fā)）
*/
oDiv.onmouseover = function(){
alert(this.innerText)
}
/*
onclick包含了
mousedown事件和mouseup事件
mousedown（鼠標(biāo)按下時觸發(fā)）
mouseup（鼠標(biāo)松開時觸發(fā)）
console.log
在控制臺顯示開發(fā)內(nèi)容
*/
oDiv.onmousedown = function(){
console.log("mousedown")
}
oDiv.onmouseup = function(){
console.log("mouseup")
}
oDiv.onclick = function(){
console.log("onclick")
}
</script>
</body>
</html>
02 html事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text">
<input type="submit" value="提交">
</form>
<script>
var oForm = document.getElementsByTagName("form")[0]
var oInput = document.getElementsByTagName("input")
oForm.onsubmit = function(){
console.log("sumbit")
return false
}
oInput[0].onfocus = function(){ //onfocus 得到焦點（當(dāng)光標(biāo)在規(guī)定位置時觸發(fā)）
console.log("aaa")
}
oInput[0].onblur = function(){ //onblur 失去焦點（當(dāng)光標(biāo)移出規(guī)定位置時觸發(fā)）1
console.log("blur")
}
oInput[0].onchange = function(){ //onchange 內(nèi)容改變的同時失去焦點（觸發(fā)
console.log("change")
}
oInput[0].oninput = function(){ //oninput 內(nèi)容改變（當(dāng)內(nèi)容改變的時候觸發(fā)）
console.log("input")
}
</script>
</body>
</html>
03 事件對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
事件對象
當(dāng)觸發(fā)某個事件時，會產(chǎn)生一個事件對象，這個對象包含著所有與事件有關(guān)的信息。
包括導(dǎo)致事件的元素、事件的類型、以及其他與特定事件相關(guān)的信息。
通過事件綁定的執(zhí)行函數(shù)是可以得到一個隱藏參數(shù)的。
說明，瀏覽器會自動分配一個參數(shù)，這個參數(shù)其實就是event對象。
Event對象的獲取方式
e.clientX, e.clientY, e.pageX, e.pageY, e.offsetX, e.offsetY
*/
</script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="test">aaa</div>
<script>
var oDiv = document.getElementById("test")
oDiv.onclick = function(e){ //用e 或 event來獲取事件對象
console.log(e) //（IE瀏覽器不適用）
console.log(window.event) //IE瀏覽器可用
var evt = e || event
console.log(evt) //瀏覽器都適配
}
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
