作为一个面试经常问到的问题,我也是久仰大名- -,本以为是一个理论型的知识,但其实再工作中真的特别实用,项目中会不停的用到这个知识点。。网上的详解也是特别的多 推荐一篇比较不错的文章:
这篇文章囊括了大多的知识点,而且浅显易懂推荐大家好好阅读一下,如下代码(文章的最后)也帮助我在工作中解决了不小的问题。
var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
var target = ev.target;
while(target !== oUl ){
if(target.tagName.toLowerCase() == 'li'){
console.log('li click~');
break;
}
target = target.parentNode;
}
})
还有可以利用事件委托来进行高级排他,再工作中也非常实用(点击一个元素后该元素添加class,其他兄弟元素删除class):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
width: 100%;
}
li {
background: #000;
width: 100%;
height: 30px;
margin-top: 5px;
}
.current {
background: red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelectorAll('ul')[0];
ul.addEventListener('click', (e) => {
var e = e || window.e;
let target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() === 'li') {
if (this.lastClick !== target) {
target.className = 'current';
if (this.lastClick) {
this.lastClick.className = '';
}
this.lastClick = target;
} else {
target.className === 'current' ? target.className = '' : target.className = 'current';
}
}
})
</script>
</body>
</html>
这段代码解释一下就是 。。写了半天 感觉文字太生硬。。解释的不到位 各位老哥自行理解吧 - 。-