注意:事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- (文字)哔哩吧啦小魔仙案例 -->
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>哔哩吧啦小魔仙天天变</li>
<li>哔哩吧啦小魔仙天天变</li>
<li>哔哩吧啦小魔仙天天变</li>
<li>哔哩吧啦小魔仙天天变</li>
<li>哔哩吧啦小魔仙天天变</li>
</ul>
<script>
// 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
alert('哔哩吧啦小魔仙天天变');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
});
//contextmenu 禁用右键菜单
document.addEventListener('contextmenu' ,function(e){
e.preventDefault();
})
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
//利用排他法进行操作
var lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(i);
for (let j = 0; j < lis.length; j++) {
lis[j].style.backgroundColor ='';
lis[i].style.backgroundColor = 'pink';
}
}
}
</script>
</body>
</html>