javascript中的事件委托

這幾天看到一個面試題,大概就是,讓你給1000個li都添加一個click事件,應該怎么添加?大多數(shù)人第一開始的感覺可能就是,每個li上邊都添加一個唄,那要是這樣的話,估計面試的時候就會GG了,這里就是撤出了我們的事件冒泡和捕獲機制,以及事件委托機制,對于上邊這些,我們慢慢來看.

首先說一下事件冒泡和事件捕獲機制,事件冒泡是有微軟公司提出來的,事件捕獲是有網景公司提出來的,當時兩家是爭論的不可開交,后來w3c也沒辦法,就采取了折中的方式,事件產生后先捕獲后冒泡,

通常,在js中監(jiān)聽事件的方法共有三種,分別是:

ele.addEventListener(type,listener,[useCapture]);//IE6~8不支持

ele.attachEvent('on'+type,listener);//IE6~10支持,IE11不支持

ele.onClick=function(){};//所有瀏覽器都支持

w3c規(guī)范中定義了三個事件階段,依次是捕獲階段,目標階段,冒泡階段,而w3c指定的dom2級規(guī)定中,使用的是addEventListener來監(jiān)聽事件的.所以我們就以addEventListener來講解,首先事假冒泡就像你從往水中扔一塊石子,水中的氣泡從下邊往上冒一樣,意思為觸發(fā)事件后從子元素王父元素方向觸發(fā),而捕獲機制則正好相反,捕獲機制是從父元素往子元素方向進行事件觸發(fā),而addEventListener函數(shù)中的第三位參數(shù)正是來決定是使用捕獲機制還是冒泡機制的,當useCapture為true是為捕獲機制,當useCapture為false時是冒泡機制,我們看一下例子:


復制代碼 
<div class="parent">
    <div class="child">

    </div>
</div>
<script>
    var parent = document.getElementsByClassName('parent')[0];
    var child  = document.getElementsByClassName('child')[0];

    parent.addEventListener('click',function(){
        console.log("這里是父元素");
    },false);
    child.addEventListener('click',function(){
        con