js 事件委託 bug 修復

2022-08-01 04:42:11 字數 922 閱讀 8070

下面是html 內容：

<


ul id


="oul"


>


<


li>1


li>


<


li>2


li>


<


li>3


li>


<


li>4


li>


<


li>5


li>


ul>


<


button 


id="btn"


>新增元素


button


>
我需要給li 繫結事件，列印點選的內容

let oul = document.getelementbyid('oul')


let lis = oul.getelementsbytagname('li')


let btn = document.getelementbyid('btn')


btn.onclick = function


()oul.onclick = function


(event)
如果點選到正確的元素是不會出錯的，但是一旦拖拽或者點到空白區域，就會列印全部元素

為了避免這個bug,只需要進行乙個簡單的判斷target

oul.onclick = function


(event) 


console.log(e.target.innerhtml)


}
接下來再次測試：

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