最好是簡(jiǎn)單點(diǎn),
js 怎么給多個(gè)div循環(huán)添加點(diǎn)擊事件
慕村1106498
2017-06-19 13:43:28
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超2個(gè)贊
window.onload?=?function(){ ????var?aDiv?=?document.getElementByTagName("div"); ????for(var?i=0;i<aDiv.length;i++){ ????????aDiv[i].index?=?i; ????????aDiv[i].onclick?=?function(){ ????????????... ????????} ????} }
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超0個(gè)贊
使用事件代理,比循環(huán)點(diǎn)擊的效率好很多,也更規(guī)范。
為li添加點(diǎn)擊事件如下:
<ul?id="todo-app"> ??<li?class="item">Walk?the?dog</li> ??<li?class="item">Pay?bills</li> ??<li?class="item">Make?dinner</li> ??<li?class="item">Code?for?one?hour</li> </ul>
第一種 使用循環(huán):
document.addEventListener('DOMContentLoaded',?function()?{ ??let?app?=?document.getElementById('todo-app'); ??let?items?=?app.getElementsByClassName('item'); ??//?給每個(gè)列表項(xiàng)添加事件監(jiān)聽器 ??for?(let?item?of?items)?{ ????item.addEventListener('click',?function()?{ ??????alert('you?clicked?on?item:?'?+?item.innerHTML); ????}); ??} });
第二種 ?事件代理:
document.addEventListener('DOMContentLoaded',?function()?{ ??let?app?=?document.getElementById('todo-app'); ??//?給容器添加事件監(jiān)聽器 ??app.addEventListener('click',?function(e)?{ ????if?(e.target?&&?e.target.nodeName?===?'LI')?{ ??????let?item?=?e.target; ??????alert('you?clicked?on?item:?'?+?item.innerHTML); ????} ??}); });
舉報(bào)