1.作用域
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
//var 没有块级作用域 输出是3 3 3
/*var node = document.querySelectorAll('ul li')
for(var i = 0;i<node.length;i++){
node[i].addEventListener('click',function(){
alert('click'+i)
})
}*/
//闭包 、输出1.2.3
/*var node = document.querySelectorAll('ul li')
for(var i = 0;i<node.length;i++){
(function(i){
node[i].addEventListener('click',function(){
alert('click'+i)
})
})(i)
}*/
//forEach
var node = document.querySelectorAll('ul li')
Array.from(node).forEach(function(nodeItem,index){
nodeItem.addEventListener('click',function(){
alert('click'+index)
})
})
</script>
</body>
2.事件委托
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<button>添加li元素</button>
<script>
var ul = document.querySelectorAll('ul')[0]
var addButton = document.querySelectorAll('button')[0]
var addIndex = 3
addButton.addEventListener('click',function(){
var addli = document.createElement('li')
addli.innerHTML = `这是添加的元素${addIndex}`
ul.append(addli)
addIndex++
})
ul.addEventListener('click',function(e){
//e 是事件源
var ev = ev || window.event; //ie兼容写法
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'li'){
alert(target.innerHTML)
}
})
</script>
</body>
2.1递归调用 触发li的子节点时，准确定位到每个li
<body>
<ul>
<li id="1">
<span>span元素</span>
</li>
<li id="2">
<div>
<span>div包着一个span元素</span>
</div>
</li>
<li id="3">
<div>div元素</div>
</li>
</ul>
<script>
var ul = document.querySelectorAll('ul')[0]
ul.addEventListener('click',function(e){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
while(target.nodeName !== ul){
if(target.nodeName.toLocaleLowerCase() == 'li'){
console.log(target.id)
alert(target.innerHTML)
break
}
target = target.parentNode
}
})
</script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
