javascript事件冒泡和事件捕获及事件代理

最新推荐文章于 2024-01-25 16:34:59 发布

依古比古*

最新推荐文章于 2024-01-25 16:34:59 发布

阅读量184

点赞数

分类专栏： web前端 js初级日常总结文章标签： js

本文链接：https://blog.csdn.net/wendymwz/article/details/106558540

版权

web前端同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

日常总结

28 篇文章 0 订阅

订阅专栏

js初级

22 篇文章 0 订阅

订阅专栏

一：什么是事件？

事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。

二：什么是事件流？

事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(eventbubbling)，而Netscape的事件流是事件捕获流(eventc apturing)。

三：事件冒泡和事件捕获的概念：

事件冒泡和事件捕获是描述事件触发事件时序问题的术语，事件捕获指的是从document到触发事件的那个节点，也就是说自上而下的去触发事件，相反的，事件冒泡是自下而上的去触发事件，绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true为事件捕获，false为事件冒泡，jQuery的 e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

3.1 第一种：事件冒泡

IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
执行顺序：p=>button=>div=>body 正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播，p =>button=>div=>body…事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面，也就是说从小到大开始传播。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="box" >
    1
    <div class="box2">
      22

        <div class="box3">
            33
          </div>
    </div>
  </div>
  
  
  
</body>
<script>
  var box1=document.querySelector('.box');
  var box2=document.querySelector('.box2');
  var box3=document.querySelector('.box3');
box3.addEventListener('click',fun1,false);
function fun1 (){
  console.log('事件3')

}
box2.addEventListener('click',fun2,false);
function fun2 (){
  console.log('事件2')

}
box1.addEventListener('click',fun3,false);
function fun3 (){
  console.log('事件1')

}

</script>
</html>
//我们给最里面的那个盒子添加事件的话会触发前边两个 这就是所谓的冒泡 
//在js中冒泡我们用的是 stopproganation
//vue是.stop

3.2 第二种：事件捕获

网景公司提出的事件流叫事件捕获流。事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：（下面我们就借用addEventListener的第三个参数来模拟事件捕获流），也就是上面的例子就会倒过来。
正如我们看到的，和冒泡流万全相反，从最不具体的元素接收到最具体的元素接收事件 body=>div=>button=>p
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="box" >
    1
    <div class="box2">
      22

        <div class="box3">
            33
          </div>
    </div>
  </div>
  
  
  
</body>
<script>
  var box1=document.querySelector('.box');
  var box2=document.querySelector('.box2');
  var box3=document.querySelector('.box3');
box3.addEventListener('click',fun1,true);
function fun1 (){
  console.log('事件3')

}
box2.addEventListener('click',fun2,true);
function fun2 (){
  console.log('事件2')

}
box1.addEventListener('click',fun3,true);
function fun3 (){
  console.log('事件1')

}




</script>
</html>
//只需要改成 true就可以 从父级往下触发 一次获取

阻止冒泡捕获的是

  e.stopPropagation()

原生的默认捕获事件是preventdefult
vue阻止默认行为是   .prevent

事件代理

js原生中事件代理在父级元素上绑定处理函数，通过e.target来获取触发的目标来做。
jQuery呢我们通过给父级元素绑定事件，不给自己元素绑定事件，然后再当点击子元素的时候，通过冒泡机制来触发父组件的处理函数
主要目的还是为了能够提高性能，这样的话我们就不需要给每个族元素绑定时间了，只需要给父元素绑定。
代码如下：

//js原生实现
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <ul >
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
  
  
</body>
<script>
 var ul=document.querySelector('ul');
 ul.onclick=function(e){
   var target=e.target
   if(e.target.nodeName=="li"){
     alert('111')
   }
 }




</script>
</html>
//jQuery实现：
  //第一个是我们绑定的 事件 第二个是 处罚的具体目标 第三个是 事件的逻辑处理
$('ul').on('click','li',function(){
  //事件逻辑
})

依古比古*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件冒泡和事件捕获及事件代理

一：什么是事件？事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。二：什么是事件流？事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队
复制链接

扫一扫

专栏目录