JS事件流和事件委託

時間  2019-11-16
標籤 事件 委託 欄目 JavaScript 简体版
原文   原文鏈接

在上一篇《JS知識點大雜燴》中說到了事件流但沒有詳細的介紹，這篇文章就來介紹一下事件流。閉包

事件流一共由三個階段分別是：this

1.捕獲階段
2.目標階段
3.冒泡階段

事件綁定你們都知道，有DOM0級（on+type）和DOM2級（addEventListener）,我以爲說那麼多概念很差理解，直接看代碼吧,爲了方便我就直接使用id來獲取元素。spa

  • DOM0級
<div id="box1"></div>
box1.onclick = function(){
    console.log('box1');
}

輸出了box1這個咱們都知道，再來看一下。3d

<div id="box1"></div>
box1.onclick = function(){
    console.log('box1');
}
box1.onclick = function(){
    console.log('box1 two');
}

輸出了box1 two,由於DOM0級會覆蓋掉以前在同一元素上面的綁定，再來看一下。代理

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.onclick = function(){
    console.log('box1');
}
box2.onclick = function(){
    console.log('box2');
}
box3.onclick = function(){
    console.log('box3');
}


當咱們點擊box1時都知道輸出box1，但是當咱們點擊box3時彈出什麼呢？code


你可能會感受奇怪，爲何我點擊的box3怎麼其餘的也會觸發？由於事件冒泡。那什麼是事件冒泡呢？概念請自行百度，直接上圖。cdn


這就叫作事件冒泡，一級一級往上冒直到window這裏我沒有畫出來。DOM0級只支持冒泡階段。對象

  • DOM2級
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.addEventListener('click', function(){
    console.log('box1');
},false);
box2.addEventListener('click', function(){
    console.log('box2');
},false);
box3.addEventListener('click', function(){
    console.log('box3');
},false);

輸出跟上面是同樣的，由於咱們綁定在了冒泡階段。（true捕獲，false冒泡）。
咱們再來看看捕獲階段是怎麼樣的blog

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.addEventListener('click', function(){
    console.log('box1');
},true);
box2.addEventListener('click', function(){
    console.log('box2');
},true);
box3.addEventListener('click', function(){
    console.log('box3');
},true);

咱們點擊box3看到

你可能會發現順序反過來了，那這是爲何呢？由於事件捕獲，那什麼是時間捕獲呢？概念請自行百度，直接上圖。事件


這就是捕獲階段，跟冒泡階段徹底相反。

那冒泡跟捕獲的執行順序是什麼樣的呢？我分別在每個元素上綁定了兩個階段的同一事件，咱們來看看觸發的順序。

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.addEventListener('click', function(){
    console.log('box1 捕獲階段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕獲階段');
},true);
box3.addEventListener('click', function(){
    console.log('box3 捕獲階段');
},true);
box1.addEventListener('click', function(){
    console.log('box1 冒泡階段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡階段');
},false);

咱們點擊box3看到，先捕獲後冒泡。

那是否是都這樣呢？咱們稍微改動一下。

box1.addEventListener('click', function(){
    console.log('box1 捕獲階段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕獲階段');
},true);
box1.addEventListener('click', function(){
    console.log('box1 冒泡階段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 捕獲階段');
},true);  // 將box3的捕獲階段放到box3的冒泡階段後面

看看觸發的順序是否是還同樣呢？


發現反過來了，其實這就叫作目標階段吧。在你觸發事件的目標元素身上不區分冒泡捕獲，按綁定的順序來執行。

咱們用圖來看一下。


這樣是否是太簡單咱們來一點複雜的。

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.addEventListener('click', function(){
    console.log('box1 捕獲階段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕獲階段');
},true);
box3.addEventListener('click', function(){
    console.log('box3 捕獲階段');
},true); 
box1.addEventListener('click', function(){
    console.log('box1 冒泡階段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡階段');
},false);
box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}

觸發順序是什麼樣的？（我以爲你最好先本身把答案寫出來）

看看你答對了沒有

這樣會不會太簡單，換一下順序

box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}
box1.addEventListener('click', function(){
    console.log('box1 捕獲階段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕獲階段');
},true);
box1.addEventListener('click', function(){
    console.log('box1 冒泡階段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 捕獲階段');
},true);


答對了嗎？

  • 再說一下冒泡和捕獲
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}
box1.addEventListener('click', function(){
    console.log('box1 捕獲階段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕獲階段');
},true);
box1.addEventListener('click', function(){
    console.log('box1 冒泡階段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡階段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 捕獲階段');
},true);


你說這樣點擊會輸出什麼？你是否是猶豫了？說明你仍是不懂冒泡和捕獲。

不要讓你看到的騙了你，冒泡是DOM結構的父子關係而不是看起來是否是包裹的關係。（答案同上面）。

  • 忘了IE了，說一下IE的事件機制。

IE上面不支持addEventListener可是它有attachEvent

box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}
box1.attachEvent('onclick', function (){
    console.log('box1 attachEvent')
})
box2.attachEvent('onclick', function (){
    console.log('box2 attachEvent')
})
box3.attachEvent('onclick', function (){
    console.log('box3 attachEvent')
})

box1.attachEvent('onclick', function (){
    console.log('box1')
})
box1.attachEvent('onclick', function (){
    console.log('box2')
})
box1.attachEvent('onclick', function (){
    console.log('box3')
})

這個會輸出什麼？（提示：不會覆蓋）
答案是：box1 box2 box3
哈哈，開玩笑啊。


是否是很奇怪，IE中該事件是先綁定的後輸出。IE六、七、8，不支持事件捕獲只支持事件冒泡。

  • 阻止事件冒泡兼容

咱們先來講一下不支持冒泡的事件：blur、focus、mouseenter、mouseleave。（我就知道這些）
仍是這個例子，咱們看一下阻止冒泡。

box1.onclick = function (){
    console.log('box1')
}
box2.onclick = function (){
    console.log('box2')
}
box3.onclick = function (e){
    e.stopPropagation();
    console.log('box3')
}

只輸出了box3.
雖然阻止了冒泡但在IE8及如下是很差使的，咱們看一下兼容的寫法。

function stopPropagate(e){
    var event = e || window.event;
    if(event.stopPropagation){
        event.stopPropagation();
    }else if(event.cancelBubble){ //IE
        event.cancelBubble = true;
    }
}

阻止默認事件兼容

function preventDef(e){
    var g = e || window.event;
    if(g.preventDefault){
        g.preventDefault();
    }else if(g.returnValue){
        g.returnValue = false;
    }
    return false;
}

咱們再來看看事件綁定的this指向

box1.onclick = function (){
    console.log('onclick', this);
}
box1.addEventListener('click',function () {
    console.log('addEventListener', this);
}, false)


IE六、七、8，事件綁定的this指向

box1.attachEvent('onclick',function () {
    console.log('attachEvent', this);
})

attachEvent [object Window]

咱們發現，IE六、七、8 this指向window

  • 擴展 事件委託
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

若是咱們要監聽每個li的行爲，你會不會這麼作。

let li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
    li.onclick = ()=>{
        console.log(i);
    }
}

評論區有位大佬指出了個人錯誤，由於這樣造成了閉包，得不到輸出的結果。由於當時只想演示事件委託沒有注意到這個狀況，在此爲讀者們表示深深的歉意。下面是更改以後的，之因此不把錯誤的修改是想告誡本身還有和我犯一樣錯誤的人。

let li = document.getElementsByTagName("li");
//ES6 
for (let i = 0; i < li.length; i++) {
    li[i].onclick = ()=>{
        console.log(i);
    }
}
//IIFE（1）
for (var i = 0; i < li.length; i++) {
    (function(j){
        li[j].onclick = ()=>{
        console.log(j);
    }})(i)
}
//IIFE（2）
for (var i = 0; i < li.length; i++) {
    li[i].onclick = (function(j){
        return ()=>{
            console.log(j);
        }
    })(i);
}

這樣作是對的單不夠好，要是再加幾個li或有不少的100|1000個li你還這樣作是否是感受就很差了。咱們就須要爲每個li註冊事件，麻煩不說，註冊不少事件就很差。那麼咱們怎麼辦的，使用事件委託，就是把你的事件委託給別人（父級），利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。

咱們來看一下。

ul.onclick = function (e){
    console.log(e.target);
}

這就是事件委託。

  • 優勢：

    • 能夠大量節省內存佔用，減小事件註冊。
    • 能夠實現當新增子對象時，無需再對其進行事件綁定，對於動態內容部分尤其合適

  • 缺點：

    • 事件代理的經常使用應用應該僅限於上述需求，若是把全部事件都用事件代理，可能會出現事件誤判。即本不應被觸發的事件被綁定上了事件。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程