事件委托原理:事件冒泡
使用场景及方法:
如果有一个元素,里面包含了很多个子元素,触发每个子元素都要执行一个事件。
以前是给每个子元素绑定事件,但使用事件委托后,只用给父元素绑定事件就行,子元素不用绑定了- - -父元素绑定事件,事件处理程序中设置触发事件的元素发生改变(e.target触发事件)
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<style>
ul {
width: 300px;
height: 300px;
padding-top: 30px;
background-color: pink;
}
li {
margin: 5px;
background-color: #fff;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
e.target.style.backgroundColor = 'green';
}, true);
</script>
</body>
</html>
页面效果:
给父元素ul绑定了事件—事件处理程序:触发事件的元素背景色改变,没有给子元素小li绑定事件
点击小li,元素会进行事件冒泡,从自身向上,小li自身没有绑定事件,但是父元素ul有绑定事件,触发了父元素ul绑定事件,所以没有给小li们绑定点击变色事件,点击小li后也会变色