javascript中的事件委托
這幾天看到一個(gè)面試題,大概就是,讓你給1000個(gè)li都添加一個(gè)click事件,應(yīng)該怎么添加?大多數(shù)人第一開始的感覺可能就是,每個(gè)li上邊都添加一個(gè)唄,那要是這樣的話,估計(jì)面試的時(shí)候就會GG了,這里就是撤出了我們的事件冒泡和捕獲機(jī)制,以及事件委托機(jī)制,對于上邊這些,我們慢慢來看.
首先說一下事件冒泡和事件捕獲機(jī)制,事件冒泡是有微軟公司提出來的,事件捕獲是有網(wǎng)景公司提出來的,當(dāng)時(shí)兩家是爭論的不可開交,后來w3c也沒辦法,就采取了折中的方式,事件產(chǎn)生后先捕獲后冒泡,
通常,在js中監(jiān)聽事件的方法共有三種,分別是:
ele.addEventListener(type,listener,[useCapture]);//IE6~8不支持
ele.attachEvent('on'+type,listener);//IE6~10支持,IE11不支持
ele.onClick=function(){};//所有瀏覽器都支持
w3c規(guī)范中定義了三個(gè)事件階段,依次是捕獲階段,目標(biāo)階段,冒泡階段,而w3c指定的dom2級規(guī)定中,使用的是addEventListener來監(jiān)聽事件的.所以我們就以addEventListener來講解,首先事假冒泡就像你從往水中扔一塊石子,水中的氣泡從下邊往上冒一樣,意思為觸發(fā)事件后從子元素王父元素方向觸發(fā),而捕獲機(jī)制則正好相反,捕獲機(jī)制是從父元素往子元素方向進(jìn)行事件觸發(fā),而addEventListener函數(shù)中的第三位參數(shù)正是來決定是使用捕獲機(jī)制還是冒泡機(jī)制的,當(dāng)useCapture為true是為捕獲機(jī)制,當(dāng)useCapture為false時(shí)是冒泡機(jī)制,我們看一下例子:
<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
