先来一个面试中常考的题目:
当ul被点击的时候找出是哪个li被点击了?将li的下标和内容都打印出来。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
方式1:(循环遍历li元素)注意:循环遍历的时候要使用let来定义i,因为事件属于异步的。
window.onload=function(){
var oLi=document.getElementsByTagName('li');
for(let i=0;i<oLi.length;i++){
oLi[i].addEventListener('click',function(){
alert(i+':'+this.innerHTML);
})
}
}
方式2:事件委托(推荐)
利用事件委托,不用遍历li数组了,利用冒泡机制的原理,将事件绑定到父元素层次,通过event事件的target属性就能检测到是哪个子元素触发了事件。
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0];
oUl.addEventListener('click',function(ev){
var oEvent=ev||event;
var target=oEvent.target;
alert(target.innerHTML);
})
}
一.事件的捕获和冒泡
1.事件捕获阶段:先从文档的document根节点往触发事件的深层节点,由外向内捕获事件。
2.目标阶段:到达目标事件的位置(事发地),触发事件
3.事件冒泡阶段:从目标事件的位置往文档的根节点位置回溯,由内向外冒泡事件。