JS事件委託學習

2022-07-26 19:15:11 字數 2016 閱讀 1955

看codecademy 寫練習js 寫煩氣了

然後在妙趣裡面找教程練習例項

教程果然是強悍的

特對教程總結下部分內容。

js 事件委託就是利用冒泡原理,把事件加到父級上觸發,執行效果。

好處:

1.提高效能

2.新新增的元素還會有之前的事件

<ulid="ul">

<li>111111

li>

<li>22222

li>

<li>333333

li>

<li>444444

li>

ul>

這樣乙個html結構

我想要給li增加乙個滑鼠點選的效果通常寫法

window.onload =

function()}}

如果事件委託呢,我會把時間委託給ul  就把for 迴圈直接改

oul.onclick =

function()

接下來我們想寫過乙個,給li加乙個滑鼠經過的效果 預設我肯定會這樣寫:

window.onload =

function()

oli[i].onmouseout =

function()}}

如果我用事件委託的寫法:

event物件,事件源,無論你操作等你個物件的事件

event物件有相容想

ie  :window.event.srcelement;

標準  : event.target;

window.onload =

function()

}oul.onmouseout =

function(ev)

}新增加元素還會有原來的事件總**

<title>無標題文件title>

<script>

window.onload= function()

}oul.onmouseout= function(ev)

obtn.onclick=function(){

inow++;

varoli =document.createelement("li");

oli.innerhtml>

head>

<body>

<inputtype= "button"

value= "增加"

id= "input" />

<ulid="ul">

<li>111111

li>

<li>22222

li>

<li>333333

li>

<li>444444

li>

ul>

body>

html>

通過 為知筆記 發布

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