js事件委託

2022-06-20 12:57:12 字數 436 閱讀 9021

事件委託主要用於乙個父容器下面有很多功能相仿的子容器,這時候就需要將子容器的事件監聽交給父容器來做。父容器之所以能夠幫子容器監聽其原理是事件冒泡,對於子容器的點選在冒泡時會被父容器捕獲到,然後用e.target來判斷到底是哪個子容器觸發了事件

示例**:

點選第二個li,console輸出2從console的輸出我們可以判斷出e.target返回的是觸發事件的element型別

然後我們看看這個事件委託會不會冒泡

234

點選p,發現只有p的事件觸發了,上一級的父元件並沒有被輸出,所以事件委託中e.target就單指那個被點選的元件

最後試一下stoppropagation會不會阻止委託的父元素接收事件

由於阻斷了了事件冒泡,所以點選第乙個li沒有反應。

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