關於Dom事件的理解
一、DOM事件的級別
DOM事件分為三個級別,分別是0級、2級和3級事件。
分別長這樣:
0級事件:
Element.onclick = function(){};
2級事件:
Element.addEventListener('click',function(){},false);
3級事件:
Element.addEventListener('keyup',function(){},false)
其中,addEventListener()方法的最後一個引數接收一個布林值,true表示該事件在捕獲階段觸發,false表示在冒泡階段觸發。
二、DOM事件模型
DOM事件模型就是捕獲和冒泡機制。
三、DOM事件流
所謂事件流,就是比如當在一個元素上綁定了一個點選事件,當點選該物件時,瀏覽器在背後做了三件事情。
1.事件捕獲,從最頂層的window物件到目標物件一層層的檢查,舉個例子
<!DOCTYPE html> <html> <head> <title>DOM事件流</title> </head> <body> <div id="ev"> <style type="text/css"> #ev{ width: 300px; height: 100px; background-color: red; text-align: center; line-height: 100px; color: #fff; } </style> 目標元素 </div> <script type="text/javascript"> window.addEventListener('click',function(){ console.log('window') },true); document.addEventListener('click',function(){ console.log('document') },true); document.documentElement.addEventListener('click',function(){ console.log('documentElement') },true); document.body.addEventListener('click',function(){ console.log('body') },true); document.getElementById('ev').addEventListener('click',function(){ console.log('ev') },true); </script> </body> </html>
控制檯的輸出內容是
//window
//document
//documentElement
//body
//ev
可以看出,事件流的經過是先到window > document >documentElement(html節點) >body >目標元素
如果在捕獲是發現某個節點也綁定了相同事件,會先觸發。
然後在目標階段觸發繫結響應事件事件。
最後從目標元素按捕獲的相反路徑冒泡。
四、Event物件的常見應用
1.Event.preventDefault();阻止預設行為
2.Event.stopPropagation();阻止冒泡
3.Event.stopImmediatePropagation();
該方法區別於法2.作用是在執行完當前事件處理程式之後,停止當前節點以及所有後續節點的事件處理程式的執行。
假如在某個節點上定義了多個事件,那麼方法2會將這些事件都執行完,而不會去冒泡。
方法3是如果在某個事件中設定了stopImmediatePropagation,那麼在該事件的後續設定的事件都不會執行。
4.Event.currentTarget
5.Event.target
currentTarget和target屬性的區別:
Event.target返回觸發事件的元素
Event.currentTarget返回繫結事件的元素
作用是什麼:
Event.target常用於事件委託。就是比如當需要給一串li元素用for迴圈繫結事件時,可以使用事件委託來優化。
舉個例子
<body>
<ul id="ev">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script type="text/javascript">
var ev = document.getElementById('ev');
ev.onclick = function(event){
var target = event.target;
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
</script>
</body>
</html>
五、自定義事件
自定義事件的話主要利用new Evnet()來構造一個自定義事件,用dispatch()方法來觸發該事件。
舉個例子:
var myEvent = new Event('my-event');
Element.addEventListener('my-event',function(){
//do something
},true)
Element.dispatch(myEvent);
但是new Event建構函式只能指定事件名,不能繫結資料。如果需要繫結資料,就要用到CustomEvent()方法。
*CustomEvent()方法
CustomEvent()建構函式語法
var myEvent = new customEvent(EventName,detail,bubble,cancelBubble);
引數詳解:
EventName:事件名的字串
detail:繫結在Event物件上的資料,可以是任意型別。
bubble:事件是否冒泡
cancelBubble:事件是否可取消
但是在IE上並不支援上述兩個API。可以參考IE中的寫法裡面的IE的API。
簡單來說IE中自定義事件主要是使用三個方法
document.createEvent()
document.initEvent();
document.dispatch();