Javascript DOM 事件
- 一、事件概述
- 事件三要素
- 二、事件注冊（系結事件）
- 1. 傳統系結方法
- 2. 方法監聽注冊方式
- addEventListener 事件監聽方式
- attachEvent 事件監聽方式
- 3. 注冊事件兼容性解決方案
- 三、洗掉事件（解綁事件）
- 1. 傳統方式洗掉事件
- 2. removeEventListener 洗掉事件
- 四、DOM事件流
- 1. 事件冒泡
- 2. 事件捕獲
- 五、事件物件
- 六、阻止事件冒泡
- 七、事件委托
- 事件委托的原理
- 事件委托的作用
一、事件概述
JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為，簡單理解： 觸發 – 回應機制，網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，在用戶點擊某按鈕時產生一個事件，然后去執行某些操作，
事件三要素
事件是有三部分組成：事件源、事件型別、事件處理程式，
-
事件源：產生事件的物件，
var btn = document.getElementById("btn"); -
事件型別：如何觸發什么事件，比如滑鼠點擊還是滑鼠經過還是鍵盤按下，
-
事件處理程式：當某個事件被觸發后執行的程式代碼，通過一個函式賦值的方式完成，
btn.onclick = function() { alert('點我干嘛？'); }
二、事件注冊（系結事件）
1. 傳統系結方法
利用 on 開頭的事件 onclick ，同一個元素同一個事件只能設定一個處理函式，最后注冊的處理函式將會覆寫前面注冊的處理函式，
特點： 注冊事件的唯一性，
<button οnclick=“alert('你點我干嘛？')”></button>
2. 方法監聽注冊方式
addEventListener 事件監聽方式
按注冊順序依次執行，使用addEventListener() 方法，是w3c 標準推薦方式，IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替，
特點：同一個元素同一個事件可以注冊多個監聽器，
btn.addEventListener('click', function(){
alert('你點我干嘛？');
})
eventTarget.addEventListener(type, listener[, useCapture])
- type：事件型別字串，比如 click 、mouseover ，注意這里不要帶 on
- listener：事件處理函式，事件發生時，會呼叫該監聽函式
- useCapture：可選引數，是一個布林值，默認是 false，useCapture = capture，true表示事件在捕獲階段處理，false表明在冒泡階段處理
attachEvent 事件監聽方式
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法將指定的監聽器注冊到 eventTarget（目標物件） 上，當該物件觸發指定的事件時，指定的回呼函式就會被執行，
該方法接收兩個引數：
- eventNameWithOn：事件型別字串，比如 onclick 、onmouseover ，這里要帶 on
- callback： 事件處理函式，當目標觸發事件時回呼函式被呼叫
3. 注冊事件兼容性解決方案
function addEventListener(element, eventName, fn) {
// 判斷當前瀏覽器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三個引數 默認是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相當于 element.onclick = fn;
element['on' + eventName] = fn;
}
三、洗掉事件（解綁事件）
1. 傳統方式洗掉事件
var div = document.querySelector('div');
divs.onclick = function() {
div.onclick = null;
}
2. removeEventListener 洗掉事件
var div = document.querySelector('div');
div.addEventListener('click', fn) // 里面的fn 不需要呼叫加小括號
function fn() {
div.removeEventListener('click', fn);
}
四、DOM事件流
- JS 代碼中只能執行捕獲或者冒泡其中的一個階段，
- onclick 和 attachEvent（e） 只能得到冒泡階段，
- 捕獲階段：如果addEventListener 第三個引數是 true 那么則處于捕獲階段 document -> html -> body -> father -> son
- 冒泡階段：如果addEventListener 第三個引數是 false 或者 省略 那么則處于冒泡階段 son -> father ->body -> html -> document
1. 事件冒泡
IE 事件流被稱為事件冒泡，這是因為事件被定義為從最具體的元素（檔案樹中最深的節點）開始觸 發，然后向上傳播至沒有那么具體的元素（檔案），比如有如下 HTML 頁面：
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
在點擊頁面中的元素后，click 事件會以如下順序發生：
(1)<div>
(2)<body>
(3)<html>
(4)document
也就是說<div>元素，即被點擊的元素，最先觸發 click 事件，然后，click 事件沿 DOM 樹一路向上，在經過的每個節點上依次觸發，直至到達 document 物件，
2. 事件捕獲
事件捕獲的意思是最不具體的節 點應該最先收到事件，而最具體的節點應該最后收到事件，事件捕獲實際上是為了在事件到達最終目標前攔截事件，如果前面的例子使用事件捕獲，則點擊元素會以下列順序觸發 click 事件：
(1) document
(2) <html>
(3) <body>
(4) <div>
事件捕獲中，click 事件首先由 document 元素捕獲，然后沿 DOM 樹依次向下傳播，直至到達實際的目標元素，
和例子結合使用的html和css，只用更換js:
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
<div class="father">
<div class="son">son盒子</div>
</div>
事件捕獲：
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
</script>
先彈出son，然后彈出father，最后彈出document
事件冒泡：
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
先彈出father，后彈出son
五、事件物件
eventTarget.onclick = function(event) {
// 這個 event 就是事件物件，我們還喜歡的寫成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 這個 event 就是事件物件，我們還喜歡的寫成 e 或者 evt
})
event 物件代表事件的狀態，比如鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態，事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件 event，它有很多屬性和方法，
event 是個形參,系統幫我們設定為事件物件,不需要傳遞實參過去，當我們注冊事件時，event 物件就會被系統自動創建,并依次傳遞給事件監聽器(事件處理函式)，
事件物件的常見屬性和方法
e.target 和 this 的區別：
- this 是事件系結的元素， 這個函式的呼叫者（系結這個事件的元素）
- e.target 是事件觸發的元素，
區別 ： e.target 點擊了那個元素，就回傳那個元素 this 那個元素系結了這個點擊事件，那么就回傳誰
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我們給ul 系結了事件 那么this 就指向ul
console.log(this);
console.log(e.currentTarget);
// e.target 指向我們點擊的那個物件 誰觸發了這個事件 我們點擊的是li e.target 指向的就是li
console.log(e.target);
})
六、阻止事件冒泡
阻止事件冒泡
e.stopPropagation();
標準寫法：利用事件物件里面的 stopPropagation()方法
e.cancelBubble = true;
非標準寫法：IE 6-8 利用事件物件 cancelBubble 屬性
<script>
// 常見事件物件的屬性和方法
// 阻止冒泡 dom 推薦的標準 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 傳播
e.cancelBubble = true; // 非標準 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
只有會彈出son，冒泡被組織，
七、事件委托
事件委托也稱為事件代理， 在 jQuery 里面稱為事件委派，
事件委托的原理
不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然后利用冒泡原理影響設定每個子節點，
例子：給 ul 注冊點擊事件，然后利用事件物件的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上，ul 有注冊事件，就會觸發事件監聽器，
事件委托的作用
我們只操作了一次 DOM ，提高了程式的性能
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289977.html
標籤：其他
上一篇：操作元素案例——購物車演示