註冊（綁定）事件
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件
1.傳統註冊方式
on + 事件名稱
var btn.onclick = function() {
console.log('111');
};
btn.onclick = function() {
console,log('222');
};
//222
注意：同一個元素同一個事件只能設置一個處理函數，最後註冊的函數會覆蓋前面註冊的處理函數
2.事件監聽方式
eventTarget.addEventListener(type, listener[, useCapture])
參數
- type：事件類型，前面不帶 on
- listener：事件處理函數
- useCapture：可選參數，布爾值，默認 false（冒泡）
eventTarget.attachEvent(eventNameWithOn, callback)
早期IE支持
參數：
- eventNameWithOn：事件類型，前面要帶 on
- callback：事件處理函數
刪除（解綁）事件
- 傳統註冊方式
eventTarget.onclick = null;
2.方法監聽註冊方式
eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);
事件流
事件流描述的是從頁面中接收事件的順序。
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即 DOM 事件流。
"DOM2事件流"規定的事件流包括三個階段：
- 處於捕獲階段
- 處於目標階段
- 處於冒泡階段
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="btn">點我</button>
<script>
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function () {
console.log('btn處於事件捕獲階段');
}, true);
oBtn.addEventListener('click', function () {
console.log('btn處於事件冒泡階段');
}, false);
document.addEventListener('click', function () {
console.log('document處於事件捕獲階段');
}, true);
document.addEventListener('click', function () {
console.log('document處於事件冒泡階段');
}, false);
document.documentElement.addEventListener('click', function () {
console.log('html處於事件捕獲階段');
}, true);
document.documentElement.addEventListener('click', function () {
console.log('html處於事件冒泡階段');
}, false);
document.body.addEventListener('click', function () {
console.log('body處於事件捕獲階段');
}, true);
document.body.addEventListener('click', function () {
console.log('body處於事件冒泡階段');
}, false);
</script>
</body>
</html>
- JS 代碼中只能執行捕獲或者冒泡其中的一個階段。
- onclick 和 attachEvent 只能得到冒泡階段。
- addEventListener 通過第三個參數控制處於冒泡還是捕獲階段
事件對象
官方解釋： event 對象代表事件的狀態，比如事件在 其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態
簡單解釋：事件發生後，跟事件相關的一系列信息數據的結合都放到這個對象裏面，這個對象就是事件對象（event）
如何使用？
綁定事件函數時，寫參數即可
test.onclick = function(e) {
//爲了兼容IE
e = e || window.event;
console.log(e);
}
事件對象常見屬性和方法
e.target 和 this 區別
e.target 返回的是觸發事件的對象（元素）
this 返回的是綁定事件的對象（元素）
簡單來說：
e.target 點擊了那個元素，就返回那個元素
this 那個元素綁定了這個事件，那麼就返回誰
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click', function(e) {
e = e || window.event;
console.log('this：');
console.log(this);
console.log('r.target：')
console.log(e.target);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
// 給 ul 綁定了事件,那麼 this 就指向 ul
console.log('this：');
console.log(this);
// e.target 指向我們點擊的那個對象 誰觸發了這個事件 我們點擊的是li e.target 指向的就是li
console.log('e.target');
console.log(e.target);
})
</script>
</body>
</html>
e.target兼容性處理
ul.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
}
和 this 相似的一個值 currentTarget
e.type返回事件類型
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
<script>
var div = document.querySelector('div');
function test(e) {
e = e || window.event;
console.log(e.type);
}
div.addEventListener('click', test);
div.addEventListener('mouseover', test);
div.addEventListener('mouseout', test);
</script>
</body>
</html>
阻止默認行爲（事件）如鏈接不跳轉，按鈕不提交
div.onclick = function(e) {
//一般瀏覽器
e.preventDefault(); //方法
//低版本IE瀏覽器
e.returnValue; //屬性
//通用，但只能用於傳統方式註冊的事件
return false;
}
阻止事件冒泡
標準
e.stopPropagation()
非標準，低版本IE
e.cancelBubble = true;
事件委託
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
var e = e || window.event;
console.log(e.target.innerText);
}
</script>
</body>
</html>