首先說一下事件冒泡和事件捕獲機制,事件冒泡是有微軟公司提出來的,事件捕獲是有網景公司提出來的,當時兩家是爭論的不可開交,後來w3c也沒辦法,就採取了折中的方式,事件產生後先捕獲後冒泡,
通常,在js中監聽事件的方法共有三種,分別是:
ele.addeventlistener(type,listener,[usecapture]);//ie6~8不支援
ele.attachevent('on'+type,listener);//ie6~10支援,ie11不支援
ele.onclick=function(){};//所有瀏覽器都支援
w3c規範中定義了三個事件階段,依次是捕獲階段,目標階段,冒泡階段,而w3c指定的dom2級規定中,使用的是addeventlistener來監聽事件的.所以我們就以addeventlistener來講解,首先事假冒泡就像你從往水中扔一塊石子,水中的氣泡從下邊往上冒一樣,意思為觸發事件後從子元素王父元素方向觸發,而捕獲機制則正好相反,捕獲機制是從父元素往子元素方向進行事件觸發,而addeventlistener函式中的第三位引數正是來決定是使用捕獲機制還是冒泡機制的,當usecapture為true是為捕獲機制,當usecapture為false時是冒泡機制,我們看一下例子:
複製**12
3456
78910
1112
1314
1516
當我們點選子元素是顯示上圖,當我們將false改為true後就會發現執行順序會反過來,這就是事件冒泡和捕獲的區別,他們兩個剛好相反,
那麼使用這種繫結機制我們的弊端在於要去給每乙個物件繫結事件會是乙個特別麻煩的事情,當我們要刪除乙個事件或者要改變乙個事件的時候會特別的繁瑣,更重要的是,我們增加了j**ascript和dom節點之間的關聯,而且一點出現迴圈引用,很有可能造成記憶體洩露,這些都是它的弊端,
那麼解決這種弊端的一種方法就是事件**(event delegation),這個方法可以讓你避免去給每乙個節點一一的新增事件,它的做法是將這些監聽事件去繫結到這些節點的父元素上,在父元素上的這個監聽函式自動去判斷是哪乙個子元素觸發的事件,從而可以對觸發事件的子元素進行操作,這裡我們給出的例子是d**idwalsh所給出的乙個例子:
現在我們有乙個父元素ul和幾個li子元素,12
3456
78
現在我們要實現的是,當我們點選每乙個li節點的時候,都會輸出li節點中的內容,按照上邊的寫法,你可以選中這些li,讓後給他們加上這些方法,然後等到不需要了再將他們移除,如果有100個li,1000個li呢,這將會成為你的噩夢,較好的解決方法就是給父元素新增乙個監聽事件,之後的問題便是怎麼去判斷出來時哪乙個li被點選了? 我們可以在監聽事件中去判斷當前event的target來判斷是否是我們要找的節點,這裡我們有乙個簡單的例子:12
3456
789// 找到父元素,繫結乙個監聽事件
document.getelementbyid("parent-list").addeventlistener("click",function(e)
});
當ul中發生點選事件後,因為addeventlistener預設是冒泡事件,所以監聽事件會在底層事件冒泡過來時執行,在觸發了事件後,去檢測是否是我們要尋找的目標元素,如果不是,就會忽略過去,那我們不僅僅可以通過目標元素的標籤是不是我們需要的目標元素,我們還可以根據目標元素的屬性或者類名來進行檢測,利用ele.maeches這個api來進行處理,12
3456
document.getelementbyid("mydiv").addeventlistener("click",function(e)
});
因此我們可以看得出來,使用事件**這種方式,能夠給我們帶來很多的便捷,可以避免很多坑,使用事件**是一種很強大的方法.
js事件委託
乙個ul列表，裡邊有乙個1000個li元素，如何為這1000個li元素新增click事件？function false 參考文章 作為閉包使用的 function 已知ab兩個有序陣列,a陣列長度m,b陣列長度n,請最多迴圈m n次找出a,b陣列中相同的元素 對 事件處理程式過多 問題的解決方案就是...
js事件委託
事件委託 通俗的講把自己應該做的事情交給別人去做，也就是利用冒泡原理，把這個這個事件交給父級或祖先去觸發執行效果。用例項來說。需求是這樣的 滑鼠放到li上對應的li背景變灰。利用事件冒泡實現 ul on mouseover function e 也許有人會說，我們直接給所有li都綁上事件也可以啊，一...
js事件委託
在給多個標籤定義乙個事件的時候我們不會給每個dom都新增乙個事件浪費很多的資源，為此可以使用js的事件委託。在圖靈社群上給事件委託是這樣定義的 事件委託就是事件目標自身不處理事件，把事件委託給父元素或者祖先元素，甚至根元素。這裡註明文章出處 自己寫了乙個demo 給ul下的每個li新增乙個click...