JS和HTML的交互是通過事件來實(shí)現(xiàn)的呀枢。JS采用異步事件驅(qū)動編程模型柠横，當(dāng)文檔泪姨，瀏覽器肠槽，元素或者與之相關(guān)的對象發(fā)生特定事情時，瀏覽器會產(chǎn)生事件阔加。如果JS關(guān)注特定類型事件，那么它可以注冊當(dāng)這類事件發(fā)生時要調(diào)用的句柄
- 事件是某個行為或者觸發(fā)满钟，比如點(diǎn)擊胜榔，鼠標(biāo)移動胳喷。
- 當(dāng)用戶點(diǎn)擊鼠標(biāo)時
- 當(dāng)網(wǎng)頁已經(jīng)加載時
- 當(dāng)圖像已經(jīng)加載時
- 當(dāng)鼠標(biāo)移動到元素上時
- 當(dāng)用戶觸發(fā)按鍵時
事件流
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div夭织，點(diǎn)擊了內(nèi)層的div吭露，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)？
目前主要有3種模型：
1尊惰，IE的事件冒泡：事件開始時由最具體的元素接收讲竿，然后逐級向上傳播到較為不具體的元素。
2弄屡，Netscape的事件捕獲：不太具體的節(jié)點(diǎn)更早接收事件题禀，而最具體的元素最后接收事件，和時間冒泡相反
3膀捷，DOM事件流：DOM2級事件規(guī)定事件流包括三個階段迈嘹，事件部或階段，處于目標(biāo)階段全庸，事件冒泡階段秀仲，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會壶笼，然后是目標(biāo)接收事件神僵，最后是冒泡階段。
這種分歧是很常見的覆劈，舉例來說挑豌，某個地方出現(xiàn)了搶劫事件，我們有多種處理方式：
1墩崩，村里先發(fā)現(xiàn)氓英，報(bào)告給鄉(xiāng)里，鄉(xiāng)里報(bào)告給縣城鹦筹，縣城報(bào)告給市里铝阐。。
2铐拐，市里先知道這個事件徘键，然后交代給縣城怎么處理，縣城交代給鄉(xiāng)里處理遍蟋，鄉(xiāng)里交給村里處理吹害。。虚青。
Opera它呀，F(xiàn)irefox，Chrome，Safari都支持DOM事件流纵穿，IE不支持事件流下隧，只支持事件冒泡。
舉例說明：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>Click me!</div>
</body>
</html>
對于如上結(jié)構(gòu)谓媒，點(diǎn)擊div區(qū)域有：
- 事件捕獲和事件冒泡的理解舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
.box {
width: 100px;
height: 100px;
background: #8ffe98;
}
</style>
<div class="container">
<div class="box">
<button>Click me!</button>
</div>
</div>
<script>
// document.body.addEventListener('click',function () {
// console.log('body clicked');
// });
// document.querySelector('.container').addEventListener('click',function () {
// console.log('container clicked;')
// })
// document.querySelector('.box').addEventListener('click',function () {
// console.log('box clicked;')
// })
// document.querySelector('.box button').addEventListener('click',function () {
// console.log('button clicked;')
// })
// 點(diǎn)擊button時輸出結(jié)果依次為：
// button clicked;
// box clicked;
// container clicked;
// body clicked
// 這是因?yàn)閍ddEventListener的第三個參數(shù)默認(rèn)是false淆院，即忽略事件捕獲階段，從事件冒泡階段開始
document.body.addEventListener('click',function () {
console.log('body clicked');
},true);
document.querySelector('.container').addEventListener('click',function () {
console.log('container clicked;')
},true)
document.querySelector('.box').addEventListener('click',function () {
console.log('box clicked;')
},true)
document.querySelector('.box button').addEventListener('click',function () {
console.log('button clicked;')
},true)
// 當(dāng)設(shè)置了屬性為true的時候句惯，忽略了事件的冒泡階段土辩，此時輸出結(jié)果就為：
// body clicked
// container clicked;
// box clicked;
// button clicked;
</script>
</body>
</html>
事件處理程序
事件偵聽者（listener），事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動作抢野。比如click拷淘，load，mouseover等蒙保，都是事件類型（俗稱事件名稱）辕棚，而響應(yīng)某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器
也就是我們需要提前定義好某些事件發(fā)生了該怎么處理，這個過程叫做綁定事件處理程序邓厕。
給元素添加事件處理程序的方法：
HTML內(nèi)聯(lián)方式：
元素支持的每個事件都可以使用一個相應(yīng)事件處理程序同名的HTML屬性指定逝嚎。這個值的屬性是可執(zhí)行的JS代碼，我們可以為button添加click事件處理程序详恼。
<input type="button" value="click me!" onclick="alert('clicked!');">JavaScript指定事件處理程序
通過JS指定事件處理程序就是吧一個方法賦值給一個元素的事件處理程序补君。
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
alert('clicked!');
}
</script>
這樣處理，事件處理程序被認(rèn)為是元素的方法昧互，事件處理程序在元素的作用域下運(yùn)行挽铁，this就是當(dāng)前元素。
這樣刪除事件處理程序時敞掘，只需要設(shè)置onclick屬性為null
-
DOM2事件處理程序
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
- addEventListener
- removeEventListener
所有的DOM節(jié)點(diǎn)都包含這兩個方法叽掘，并且他們都接收3個參數(shù)：
1,事件類型
2,事件處理方法
3，布爾參數(shù)玖雁，如果是true表示在捕獲階段調(diào)用事件處理程序更扁，如果是false，則是在事件冒泡階段處理赫冬，默認(rèn)為false
所以針對剛才的例子浓镜，還可以寫為：
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
btn.addEventListener('click',function() {
alert('clicked!!!');
});
</script>
使用addEventListener的好處是可以為事件添加多個程序，因?yàn)楸举|(zhì)上只是元素在調(diào)用函數(shù)劲厌，可以多次調(diào)用膛薛，每次傳入不同的參數(shù)。而JS方法實(shí)現(xiàn)的話本質(zhì)上是給元素的屬性賦值补鼻，不能添加多個事件處理程序哄啄，后面賦值的屬性會覆蓋前面的雅任。
要移除事件處理程序可以使用removeEventListener,移除時參數(shù)與添加的時候相同，這就意味著剛才我們添加的匿名函數(shù)無法移除增淹，因?yàn)槟涿瘮?shù)雖然方法體一樣椿访，但是句柄不相同乌企，所以當(dāng)我們有移除事件處理程序的時候可以這樣寫：
<input type="button" value="click me!">
<script>
var btn = document.querySelector('input');
var handler = function () {
alert('clicked!!');
}
// function handler () {
// alert('c');
// }
btn.addEventListener('click',handler);
//要移除click事件虑润，可以這么寫
btn.removeEventListener('click',handler);
</script>
關(guān)于this和事件的區(qū)別
<body>
<div class="box">
<button>click me</button>
</div>
<script>
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.addEventListener('click',function (e) {
console.log(this); //<button>click me</button>
console.log(this.innerText);//click me
console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
console.log(e.target); // <button>click me</button>
});
box.addEventListener('click',function (e) {
console.log(this); //<div class="box"><button>click me</button></div>
console.log(this.innerText);//click me
console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
console.log(e.target); //<button>click me</button>
//這時候的this和e.target就不一樣了，this表示誰監(jiān)聽到的就是誰加酵，e.target事件真實(shí)的原始觸發(fā)點(diǎn)拳喻，即事件最終到達(dá)的元素
});
</script>
</body>
事件兼容，IE兼容
老IE不支持addEventListener()和removeEventListener()猪腕，但是有兩個類似的方法：
1,attachEvent
2,detachEvent
這兩方法都接收2個相同的參數(shù)
1冗澈，事件處理程序名稱
2，事件處理程序方法
由于IE只支持時間冒泡陋葡，所以添加的程序會被添加到冒泡階段亚亲，使用attachEvent添加事件處理程序可以如下：
<body>
<div class="box">
<button id="btn">click me</button>
</div>
<script>
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
var handler = function () {
console.log(this.id); //undefined
}
btn.attachEvent('onclick',handler); // 注意是onclick，attachEvent沒有第三個參數(shù),因?yàn)镮E只支持事件冒泡
</script>
</body>
attachEvent()和addEventListener()的區(qū)別
1腐缤，參數(shù)個數(shù)不相同捌归，IE只支持事件冒泡，所以attachEvent只有兩個參數(shù)岭粤。
2惜索，第一個參數(shù)意義不同addEventListener()第一個參數(shù)是事件類型（比如click,load）,而attachEvent()的第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
3剃浇，事件處理程序的作用域不同巾兆，addEventListener()的作用域是元素本身，this指的是觸發(fā)元素虎囚，而attachEvent()事件處理程序會在全局變量內(nèi)運(yùn)行角塑，this是window，所以剛才例子會返回undefined淘讥，而不是元素id
4圃伶，為一個事件添加多個事件處理程序時，執(zhí)行順序不同适揉，addEventListener()添加會按照順序執(zhí)行留攒，而attachEvent()添加多個事件處理程序時無規(guī)律（添加的多了的話），所以添加多個的時候嫉嘀，如果依賴函數(shù)執(zhí)行順序炼邀，需要自己處理。取消事件冒泡 e.stopPropagation()
var btn = document.querySelector('#btn');
var box = document.querySelector('.box');
box.addEventListener('click',function (e) {
e.stopPropagation();//阻止了事件的繼續(xù)冒泡
})
- 取消默認(rèn)事件
<a >link</a>
var link = document.querySelector('a');
link.addEventListener('click',function(e) {
e.preventDefault(); // 阻止了默認(rèn)的跳轉(zhuǎn)
})
事件代理
創(chuàng)建了新節(jié)點(diǎn)剪侮，不需要另外重復(fù)綁定事件拭宁，給父節(jié)點(diǎn)綁定事件洛退，使用target而不是this來獲取點(diǎn)擊節(jié)點(diǎn)。 還要注意點(diǎn)擊到父節(jié)點(diǎn)而沒有點(diǎn)擊到目標(biāo)節(jié)點(diǎn)的情況杰标。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.container {
margin: 30px auto;
width: 900px;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.container li {
border: 1px solid #cccccc;
line-height: 1.5;
}
#show {
background: #cccccc;
}
</style>
<div class="container">
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
<input type="text" id="add-ipt"><button id="btn">添加</button>
<div id="show"></div>
</div>
</body>
<script>
var liNodes = document.querySelectorAll('.container ul li');
var show = document.querySelector('#show');
var add = document.querySelector('#btn');
var ul = document.querySelector('ul');
var container = document.querySelector('.container');
var addIpt = document.querySelector('#add-ipt');
// liNodes.forEach(function (node) {
// node.addEventListener('click',function () {
// console.log(node);
// show.innerText = this.innerText;
// })
// })
// add.addEventListener('click',function() {
// var text = document.createElement('li');
// text.innerText = addIpt.value;
// ul.appendChild(text);
// text.addEventListener('click',function () {//新增的節(jié)點(diǎn)沒有綁定事件兵怯，點(diǎn)擊不會展示在show里，所以需要另行綁定\
// show.innerText = this.innerText; //但是這樣代碼很不合理腔剂，可以使用事件代理
// })
// })
// 事件代理的寫法
// 不是給每個節(jié)點(diǎn)綁定事件媒区，而是給其父元素綁定事件，不用this而是用target掸犬，這樣新建的節(jié)點(diǎn)也能使用target
ul.addEventListener('click',function (e) {
var target = e.target; // 不用this而使用target
// 存在問題袜漩，點(diǎn)ul不點(diǎn)li會直接出現(xiàn)所有ul的內(nèi)容
// 所以進(jìn)行判斷，是否是點(diǎn)擊到了li上
if (target.tagName.toLowerCase() === 'li') {
show.innerText = target.innerText;
}
})
add.addEventListener('click',function () {
var text = document.createElement('li');
text.innerText = addIpt.value;
ul.appendChild(text);
})
</script>
</html>
常見事件用法
mouseover和mouseenter的區(qū)別：
- 不論鼠標(biāo)指針穿過被選元素或其子元素湾碎，都會觸發(fā) mouseover 事件宙攻。
- 只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件介褥。
function $(id) {
return document.querySelector(id);
}
function $$(className) {
return document.querySelectorAll(className);
}
// 常見事件
// click dbclick
$('#btn').addEventListener('click',function () {
console.log(this);
})
$('#btn1').addEventListener('dbclick',function () {
console.log(this);
})
// mouseover mouseout
$('#ct').addEventListener('mouseover',function () { //mouseover如果里面還有子元素座掘，每次碰到子元素再回來就會再觸發(fā)一次
console.log(1);
window.node = this; //由于是回調(diào)函數(shù)，提前this存起來便于輸出
console.log(node); // this仍然代表這個容器
this.classList.add('hover'); //要改變樣式柔滔，可以css里面寫個樣式應(yīng)用
})
$('#ct').addEventListener('mouseover',function () { //和mouseover相對的是mouseout
console.log(2);
window.node = this;
console.log(node);
this.classList.remove('hover'); //鼠標(biāo)離開時溢陪，去除樣式
})
// mouseenter mouseleave
// 一般使用mouseenter mouseleave而不是使用mouseover mouseout
$('#ct').addEventListener('mouseenter',function () {
console.log(3);
window.node = this;
console.log(node);
this.classList.add('hover');
})
$('#ct').addEventListener('mouseleave',function () {
console.log(4);
window.node = this;
console.log(node);
this.classList.remove('hover');
})
// input獲取焦點(diǎn)focus和失去焦點(diǎn)blur,keyup,change
$('#input-name').addEventListener('focus',function () {
console.log(1);
console.log(this.value);
})
$('#input-name').addEventListener('blur',function () {
console.log(2);
console.log(this.value);
})
$('#input-name').addEventListener('keyup',function () { //鍵盤松開
console.log(this.value);
this.value = this.value.toUpperCase();
})
$('#input-name').addEventListener('change',function () { //里面內(nèi)容發(fā)生改變時，可以看做是一個blur加上一個判斷是否改變的事件
console.log(this.value);
this.value = this.value.toUpperCase();
})
// form的表單提交驗(yàn)證
$('#form').addEventListener('submit',function (e) {
e.preventDefault();//阻止默認(rèn)提交
if (/\w{6,20}$/.test($('#username').value)) {
$('#form').submit(); //驗(yàn)證成功后提交
}
else {
$('.msg').innerText = '出錯了';
$('.msg').style.display = 'block';
console.log('No Submit');
}
})
// scroll
window.addEventListener('scroll',function (e) { //其實(shí)稍微滾動一下就會執(zhí)行很多次
console.log(1);
})
// load
