<body>
<ul id="parent-list">
<li><a href="javascript:;" class="my_link">超链接一</a></li>
<li><a href="javascript:;" class="my_link">超链接二</a></li>
<li><a href="javascript:;" class="my_link">超链接三</a></li>
</ul>
</body>
<script>
//1.批量绑定事件的第一个方式
// var lis = document.getElementById('parent-list').children
// for(let i=0;i<lis.length;i++){
// lis[i].onmouseover = function(){
// this.style.backgroundColor = 'pink'
// }
// lis[i].onmouseout = function(){
// this.style.backgroundColor = ''
// }
// }
//2.事件委派 把所有li的事件放在父节点ul上
var ul = document.getElementById('parent-list')
ul.addEventListener('mouseover',function(event){
console.log(event.target)
//console.log(event)
// if(event.target.nodeName == 'LI'){
// console.log(event.target)
// event.target.style.backgroundColor = 'pink'
// }
if(event.target && event.target.className == 'my_link'){
event.target.style.backgroundColor = 'pink'
}
})
ul.addEventListener('mouseout',function(event){
//console.log(event)
// if(event.target.nodeName == 'LI'){
// console.log(event.target)
// event.target.style.backgroundColor = ''
// }
if(event.target && event.target.className == 'my_link'){
event.target.style.backgroundColor = ''
}
})
//总结：事件委派就是把子节点的功能让父节点来实现。
//技巧：判断event.target 是哪个元素 就在当前上加事件
</script>