javascript中的事件委托
這幾天看到一個(gè)面試題,大概就是,讓你給1000個(gè)li都添加一個(gè)click事件,應(yīng)該怎么添加?大多數(shù)人第一開(kāi)始的感覺(jué)可能就是,每個(gè)li上邊都添加一個(gè)唄,那要是這樣的話,估計(jì)面試的時(shí)候就會(huì)GG了,這里就是撤出了我們的事件冒泡和捕獲機(jī)制,以及事件委托機(jī)制,對(duì)于上邊這些,我們慢慢來(lái)看.
首先說(shuō)一下事件冒泡和事件捕獲機(jī)制,事件冒泡是有微軟公司提出來(lái)的,事件捕獲是有網(wǎng)景公司提出來(lái)的,當(dāng)時(shí)兩家是爭(zhēng)論的不可開(kāi)交,后來(lái)w3c也沒(méi)辦法,就采取了折中的方式,事件產(chǎn)生后先捕獲后冒泡,
通常,在js中監(jiān)聽(tīng)事件的方法共有三種,分別是:
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級(jí)規(guī)定中,使用的是addEventListener來(lái)監(jiān)聽(tīng)事件的.所以我們就以addEventListener來(lái)講解,首先事假冒泡就像你從往水中扔一塊石子,水中的氣泡從下邊往上冒一樣,意思為觸發(fā)事件后從子元素王父元素方向觸發(fā),而捕獲機(jī)制則正好相反,捕獲機(jī)制是從父元素往子元素方向進(jìn)行事件觸發(fā),而addEventListener函數(shù)中的第三位參數(shù)正是來(lái)決定是使用捕獲機(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
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式