事件委托
因为冒泡机制,比如既然点击子元素,也会触发父元素的点击事件,那我们完全可以将子元素的事件要做的事写到父元素的事件里,也就是将子元素的事件处理程序写到父元素的事件处理程序中,这就是事件委托;利用事件委托,只指定一个事件处理程序,就可以管理某一个类型的所有事件。
通俗来说:事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
实例:
首先创建一个div标签,它的里面含有四个子元素p标签,并设置相应的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6</title>
<style>
div{
width: 100%;
height: 102px;
overflow: hidden;
}
p{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: pink;
margin: 0 50px;
float: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="one">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
</body>
</html>
效果图:
需求:每次点击任意一个p标签,它的背景颜色变成浅蓝色,而其他p标签的背景颜色不变。
方法一 :
首先通过forEach循环遍历拿到由所有的p标签的pps伪数组后再把它转成pps数组,然后再通过for循环遍历pps数组把所有p标签的背景颜色为粉红色(初始化),最后设置点击的p标签的背景颜色变成浅蓝色。
具体代码如下:
<script>
window.onload = function(){
var pps = document.getElementsByTagName('p');
pps = Array.prototype.slice.call(pps,0);
pps.forEach(function(item){
item.onclick = function(event){
for(var i=0;i<pps.length;i++){
pps[i].style.background = 'pink';
}
event.target.style.background = 'skyblue';
}
});
}
</script>
方法二:
使用事件委托,用父级div标签做事件处理。当p标签被点击时,由于冒泡原理,事件就会冒泡到div标签上,因为div标签上有点击事件,所以事件就会触发。
具体代码如下:
<script>
window.onload = function(){
var div = document.getElementsByClassName('one')[0];
var pps = document.getElementsByTagName('p');
pps = Array.prototype.slice.call(pps,0);
div.onclick = function(event){
if (event.target.nodeName === 'P') {
pps.forEach(function(item){
item.style.background = 'pink';
});
event.target.style.background = 'skyblue';
}
}
}
</script>
运行结果如下: