Web前端学习第3章 JavaScript基础教程16 事件流

原创

学习猿地

修改于 2020-06-17 17:38:42

7430

修改于 2020-06-17 17:38:42

文章被收录于专栏：学习猿地

一、绑定事件

想要给一个元素绑定事件，我们有两种方法：使用内联事件或事件监听器。在之前的课程中，我们一直使用的是内联事件来为元素绑定事件，例如一个按钮的点击事件，代码如下

btn.onclick = function(){}   //绑定鼠标单击事件

我们还可以用使用事件监听器为元素绑定事件，代码如下

btn.addEventListener("click",function(){});

下面我们用两种方法为按钮绑定事件

 1 <button id="btn1">按钮1</button>
 2 <button id="btn2">按钮2</button>
 3 <script>
 4     var btn1 = document.querySelector("#btn1");
 5     var btn2 = document.querySelector("#btn2");
 6 
 7     btn1.onclick = function(){
 8         console.log("我是按钮1");
 9     }
10 
11     btn2.addEventListener("click",function(){
12         console.log("我是按钮2");
13     })
14 </script>

两种方法都能实现相同的效果，能成功的为按钮绑定了点击事件，但区别是使用addEventLitener可以无限制的为元素绑定事件，而内联事件后面的会覆盖前面的

 1 var btn1 = document.querySelector("#btn1");
 2 var btn2 = document.querySelector("#btn2");
 3 
 4 btn1.onclick = function(){
 5     console.log("我是按钮1");
 6 }
 7 btn1.onclick = function(){
 8     console.log("我是按钮1,第二次绑定");
 9 }
10 
11 btn2.addEventListener("click",function(){
12     console.log("我是按钮2");
13 })
14 
15 btn2.addEventListener("click",function(){
16     console.log("我是按钮2,第二次绑定");
17 })

第一个按钮第二次绑定的事件覆盖了第一次绑定的事件，第二个按钮两次绑定的事件都能被触发。

二、事件冒泡与事件捕获

接下来我们用事件监听器为三个div元素绑定点击事件，最外层的div宽高是300px，中间的div宽高都是200px，最内层的div宽高都是100px，那么思考一下，点击最内层的div，事件会如何触发，是只触发最内层的div，还是从内到外依次触发，还是从外到内依次触发

 1 <div class="box1">
 2     <div class="box2">
 3         <div class="box3"></div>
 4     </div>
 5 </div>
 6 
 7 var box1 = document.querySelector(".box1");
 8 var box2 = document.querySelector(".box2");
 9 var box3 = document.querySelector(".box3");
10 
11 box1.addEventListener("click",function(){
12     console.log("我是box1")
13 })
14 box2.addEventListener("click",function(){
15     console.log("我是box2")
16 })
17 box3.addEventListener("click",function(){
18     console.log("我是box3")
19 })

通过上面的例子我们可以看到，事件是从最内层开始触发，然后依次向外，输出的顺序是box3-box2-box1。导致这种顺序的原因是因为：事件流有事件捕获阶段和事件冒泡阶段，事件捕获阶段是从最外层元素开始一层一层进入到事件目标（也就是我们点击的那个元素），到达事件目标后，进入事件冒泡阶段，事件从最内层流向最外层，事件默认情况下在冒泡阶段触发，所以我们看到的是先输出box3,最后输出box1。

我们也可以将事件设置为捕获阶段触发，代码如下

1 box1.addEventListener("click",function(){
2     console.log("我是box1")
3 },true)
4 box2.addEventListener("click",function(){
5     console.log("我是box2")
6 },true)
7 box3.addEventListener("click",function(){
8     console.log("我是box3")
9 },true)

只要在添加事件方法中添加第三个参数为true,事件就会在捕获阶段被触发，这样输出的顺序就变成了box1-box2-box3。但是在日常开发中，我们几乎不用做此修改，让事件在冒泡阶段触发就可以了。

三、事件委托

利用事件流的原理，我们可以实现事件委托，事件委托可以简单的理解为将子级的事件委托给父级来处理，我们先来看一个简单的例子

1 <div class="btnBox">
2     <button class="btn1">按钮1</button>
3     <button class="btn2">按钮2</button>
4 </div>

网页中有两个按钮，他们的父级是一个div标签，现在我们希望给这两个按钮绑定事件，当我们点击按钮的时候输出按钮的文本内容，按照我们之前学过的知识，可以有如下写法

1 //第一种写法
2 var btn1 = document.querySelector(".btn1");
3 var btn2 = document.querySelector(".btn2");
4 btn1.addEventListener("click",function(){
5     console.log(this.innerHTML)
6 })
7 btn2.addEventListener("click",function(){
8     console.log(this.innerHTML)
9 })

这种方法简单易懂，但是存在重复，两个按钮触发事件执行的代码完全一样，我们可以获取到所有按钮，再通过遍历绑定事件

1 //第二种写法
2 var btnArray = document.querySelectorAll("button");
3 for(var i = 0;i<btnArray.length;i++){
4     btnArray[i].addEventListener("click",function(){
5         console.log(this.innerHTML)
6     })
7 }

通过遍历我们优化了代码，但是仍然存在问题，首先，如果按钮的数量特别多，每一个按钮都绑定依次事件会非常影响程序的性能，其次，就算不考虑性能，通过这种方法绑定事件，如果使用js新增了一个按钮，这个按钮因为初始化的时候没有绑定事件，所以无法点击。为了解决上述问题，我们可以使用事件委托的方式来实现上面的功能

1 var btnBox = document.querySelector(".btnBox");
2 btnBox.addEventListener("click",function(event){
3     var target = event.target;    //通过事件对象获取事件目标
4     console.log(target.innerHTML);
5 })

在事件监听函数中，我们可以在形参的位置获取到事件对象event，事件对象中包含了事件相关的信息，通过event.target可以获取到我们的事件目标，在这个例子中事件目标就是我们点击的按钮，而我们事件绑定的是按钮的容器，这样就可以将自己元素的事件委托给父级来处理。

四、课后练习

一、实现如下功能(阻止事件冒泡)

点击一个按钮，显示一个容器的盒子；
点击容器，容器背景颜色改变；
点击容器按钮容器关闭;

二、实现水果列表，让后添加的元素也可以删除(事件委托);

三、通过上下左右按键控制元素移动；

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

容器

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

容器

登录后参与评论

0 条评论

热度