js事件委託

2021-10-23 09:01:57 字數 962 閱讀 9966

事件委託的原理是事件的冒泡實現。

事件冒泡的形式:事件開始時由最具體的元素(文件中巢狀層次最深的那個節點)接收,然後逐級向上傳播到較為不具體的節點(文件)。簡而言之,就是由里向外進行冒泡。

優點:減少了函式的建立。在為父元素新增新的子元素事件的時候,子元素能夠自動新增事件,不用通過獲取元素再遍歷的方式為新元素新增事件;由於每個方法就相當於是乙個物件,如果不使用委託的話,每次新增的新元素產生就會產生新的的物件占用記憶體。

"ulele"

>

111<

/li>

222<

/li>

333<

/li>

<

/ul>

//例1

var ulele = document.

queryselector

("#ulele");

console.

log(ulele)

; ulele.

onclick

=function

(e)}

//例2

window.

onload

=function()

,false)}

var li = document.

createelement

("li");

//新添的元素依然被新增了事件

li.setattribute

('class'

,'addli-1');

li.innertext =

4444

; ulele.

(li)

;<

/script>

<

/body>

注: e.target/e.srcelement表示當前事件作用的物件。

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...