事件

html中與JAVAscript交互是通過事件驅(qū)動來實現(xiàn)的，例如鼠標(biāo)點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預(yù)訂事件。想要知道這些事件是在什么時候進(jìn)行調(diào)用的，就需要了解一下“事件流”的概念。

事件流

事件流描述的就是從頁面中接收事件的順序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕獲。

事件流類別

事件冒泡

即從下至上，從目標(biāo)觸發(fā)的元素逐級向上傳播，直到window對象。

事件捕獲

即從上至下，從document逐級向下傳播到目標(biāo)元素。

后來ECMAScript在DOM2中對事件流進(jìn)行了進(jìn)一步規(guī)范，基本上就是上述二者的結(jié)合。

DOM2級事件規(guī)定的事件流包括三個階段：

1. 事件捕獲階段
2. 處于目標(biāo)階段
3. 事件冒泡階段

注意:warning:：先捕獲后冒泡，但是在目標(biāo)節(jié)點上誰寫在前面誰先執(zhí)行。但是在目標(biāo)元素上不區(qū)分冒泡還是捕獲，按綁定的順序來執(zhí)行。

DOM事件級別

分為四個級別

DOM0：不是W3C規(guī)范。

DOM1：開始是W3C規(guī)范。專注于HTML文檔和XML文檔。

DOM2：對DOM1增加了 樣式表對象模型

DOM3：對DOM2增加了 內(nèi)容模型 (DTD 、Schemas) 和 文檔驗證 。

DOM0級

DOM0級事件具有極好的跨瀏覽器優(yōu)勢，會以最快的速度綁定。綁定方式有如下兩種

行內(nèi)綁定（內(nèi)聯(lián)模型）

將函數(shù)名直接作為html標(biāo)簽中屬性的屬性值。

<div onclick="btnClick()">按鈕</div>
<script>
function btnClick(){
    console.log("hello");
}
</script>

動態(tài)綁定（腳本模型）

通過在JS中選中某個節(jié)點，然后給節(jié)點添加onclick屬性

<div id="btn">按鈕</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log("點擊");
}
</script>

注意:warning:

• DOM0級同一個節(jié)點只能添加一次同類型事件，后添加的同類型事件會覆蓋前面的事件
• DOM0級只支持冒泡

DOM1級

其中DOM1級事件處理標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以沒有所謂的DOM1事件處理

DOM2級

DOM2級定義了兩個事件處理程序。（觀察者模式）

• addEventListener() ---添加事件偵聽器
• removeEventListener() ---刪除事件偵聽器

函數(shù)均有3個參數(shù)， 第一個參數(shù)是要處理的事件名 第二個參數(shù)是作為事件處理程序的函數(shù) 第三個參數(shù)是一個boolean值，默認(rèn)false表示使用冒泡機(jī)制，true表示捕獲機(jī)制。

<div id="btn">按鈕</div>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",helloagain,false);
function hello(){
    console.log("hello");
}
function helloagain(){
    console.log("hello again");
}
</script>
// 點擊后結(jié)果： // hello// hello again

注意:warning:

如果定義了一模一樣的監(jiān)聽方法時，是會發(fā)生覆蓋的。

<div id="btn">點擊</div>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",hello,false);
function hello(){
    console.log("hello");
}
</script>
// 點擊后結(jié)果： // hello

DOM3級

對DOM2增加了 內(nèi)容模型 (DTD 、Schemas) 和 文檔驗證 。定義了一些新的事件，比如鍵盤事件，還可以自定義事件。

自定義事件

自定義事件不是由DOM原生觸發(fā)的，它的目的是讓開發(fā)人員創(chuàng)建自己的事件。要創(chuàng)建的自定義事件可以由createEvent("CustomEvent"); 返回的對象有一個initCustomEvent（）方法接收如下四個參數(shù)。

• type：字符串，觸發(fā)的事件類型，自定義。例如 “keyDown”，“selectedChange”;
• bubble（布爾值）：標(biāo)示事件是否應(yīng)該冒泡；
• cancelable(布爾值)：標(biāo)示事件是否可以取消；
• detail（對象）：任意值，保存在event對象的detail屬性中；

可以像分配其他事件一樣在DOM中分派創(chuàng)建的自定義事件對象。如：

var  div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
  alert("div myEvent!");
});EventUtil.addEventHandler(document,"myEvent",function(){
  alert("document myEvent!");
});if(document.implementation.hasFeature("CustomEvents","3.0")){
  var e = document.createEvent("CustomEvent");
  e.initCustomEvent("myEvent",true,false,"hello world!");
  div.dispatchEvent(e);}

這個例子中創(chuàng)建了一個冒泡事件“myEvent”。而event.detail的值被設(shè)置成了一個簡單的字符串，然后在div和document上偵聽該事件，因為在initCustomEvent中設(shè)置了事件冒泡。所以當(dāng)div激發(fā)該事件時，瀏覽器會將該事件冒泡到document。

阻止冒泡

stopPropagation函數(shù)

btn.addEventListener('click',function(ev){
    ev.stopPropagation();    console.log('阻止冒泡')
}, false)

事件委托（事件代理）

原理

如果有多個DOM節(jié)點需要監(jiān)聽事件的情況下，給每個DOM綁定監(jiān)聽函數(shù)，會極大的影響頁面的性能，因為我們通過事件委托來進(jìn)行優(yōu)化，事件委托利用的就是冒泡的原理。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var li_list = document.getElementsByTagName('li')
    for(let index = 0;index<li_list.length;index++){
        li_list[index].addEventListener('click', function(ev){
            console.log(ev.currentTarget.innerHTML)
        })
    }
</script>

正常情況我們給每一個li都會綁定一個事件，但是如果這時候li是動態(tài)渲染的，數(shù)據(jù)又特別大的時候，每次渲染后（有新增的情況）我們還需要重新來綁定，又繁瑣又耗性能；這時候我們可以將綁定事件委托到li的父級元素，即ul。

var ul_dom = document.getElementsByTagName('ul')
ul_dom[0].addEventListener('click', function(ev){  
    console.log(ev.target.innerHTML)
})

target和currentTarget區(qū)別：

• target返回觸發(fā)事件的元素，不一定是綁定事件的元素
• currentTarget返回的是綁定事件的元素

優(yōu)點

• 提高性能: 每一個函數(shù)都會占用內(nèi)存空間，只需添加一個事件處理程序代理所有事件，所占用的內(nèi)存空間更少。
• 動態(tài)監(jiān)聽: 使用事件委托可以自動綁定動態(tài)添加的元素，即新增的節(jié)點不需要主動添加也可以一樣具有和其他元素一樣的事件。

參考自

JS高級程序設(shè)計

https://zhuanlan.zhihu.com/p/114276880

https://www.jianshu.com/p/7f5f4c74dde8

https://www.jianshu.com/p/5d2905584a2f

https://www.jianshu.com/p/394e31cc8e7f

本文作者:一只菜鳥攻城獅啊

原文地址:https://www.cnblogs.com/suihang/p/13599887.html