这就要用到事件委托了
如何进行事件委托
**(1) 当存在多个元素可以共用同一个监听器。**
例子:当想要点击li来触发事件的时候,第一种方法是为每个li都绑定一个监听器,但当li很多时,这样处理就过于繁琐。为了减少dom 的操作,我们可以利用事件委托交给父级元素ul来执行,这样就只用绑定一个监听事件了。粘代
<ul>
<li>点<span>这里</span></li>
<li>点这里</li>
</ul>
var ul =document.querySelector('ul');
//给父级添加监听事件,委托给父级执行
ul.addEventListener('click',function(e){
var el= e.target;
console.log(el.tagName);
//只让点击li的时候执行 ,点击ul的时候不执行
while(el.tagName !== 'LI'){
//如果点击的元素为ul,直接跳出循环
if(el === ul){
el = null
break;
//否则,将当前元素父元素赋给el
}else{
el = el.parentNode;
}
}
if(el){
console.log('ok')
}else{
console.log("你点击的不是li");
}
})
(2) 动态的实现事件委托
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="addButton">动态添加li</button>
var ul = document.querySelector('ul');
addButton.onclick = function(){
var li = document.createElement('li');
li.textContent = 'new'
//给ui动态添加li
ul.appendChild(li);
}
//给ui 添加事件委托
ul.addEventListener('click',function(e){
console.log(e.target+"---");
})
面试的时候问到的,回来赶紧学习一下。