js--事件--事件流

最新推荐文章于 2023-11-10 17:29:37 发布

github_34514750

最新推荐文章于 2023-11-10 17:29:37 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： js 事件流

本文链接：https://blog.youkuaiyun.com/github_34514750/article/details/53067077

javaScript 专栏收录该内容

52 篇文章

订阅专栏

本文深入探讨了事件流机制，包括事件冒泡与事件捕获的概念及其工作原理，并讲解了如何利用这些机制进行事件处理，还提供了阻止事件冒泡的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于事件写了一系列文章

1.事件流（事件捕获和事件冒泡）
本文介绍事件流
2.事件处理程序
http://blog.youkuaiyun.com/github_34514750/article/details/53083973
3.事件对象
http://blog.youkuaiyun.com/github_34514750/article/details/53084014
4.通用的事件侦听器函数
http://blog.youkuaiyun.com/github_34514750/article/details/53084034
5.事件循环（event loop）
http://blog.youkuaiyun.com/github_34514750/article/details/53067106
6.事件代理（(event delegation）
http://blog.youkuaiyun.com/github_34514750/article/details/53067133

1.事件流(事件冒泡和事件捕获)

事件流描述的是从页面中接受事件的顺序。

事件冒泡机制：当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级，一直到顶层window

事件捕获机制：当触发目标元素时，会从目标元素的最顶层的祖先元素事件往下执行到目标元素为止。

事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段(无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段 )

所有事件的顺序是(注意本元素代码的顺序执行)

其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。

关于事件，IE与火狐的事件机制有什么区别？

IE是事件冒泡、firefox支持事件冒泡和事件捕获模型

如何阻止事件冒泡？

1、cancelBubble（HTML DOM Event 对象属性）：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
注意旧ie的方法：ev.cancelBubble = true;（IE）
2、stopPropagation（HTML DOM Event 对象方法）：（Firefox）终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

function stopBubble(e)  
{  
    if (e && e.stopPropagation)  
        e.stopPropagation()  
    else
        window.event.cancelBubble=true
}  

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

执行两次事件，同一个dom元素且这个是目标阶段的元素，按照事件的顺序执行事件—-参数为false是冒泡，为true是捕获

<head>
  <title></title>
  <style type="text/css">
    #p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
    #c { width: 200px; height: 200px; border: 1px solid red; }
    #sub { width: 100px; height: 100px; border: 1px solid red; }
  </style>
</head>
<body>
  <div id="p">
    parent
    <div id="c">
      child
    </div>
  </div>

  //点击子div，则输出父节点捕获，子节点捕获，子节点冒泡，父节点冒泡--看参数false则是事件冒泡，若是true，则是事件捕获
  <script type="text/javascript">
    window.alert = function (msg) {
      console.log(msg);
    };
    var p = document.getElementById('p'),
        c = document.getElementById('c');
    p.addEventListener('click', function (e) {
      alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
      alert('子节点捕获')
    }, true);
    c.addEventListener('click', function (e) {
      alert('子节点冒泡')
    }, false);
    p.addEventListener('click', function (e) {
      alert('父节点捕获')
    }, true);

    //点击子div，则输出父节点捕获，子节点冒泡，子节点捕获，父节点冒泡
    p.addEventListener('click', function (e) {
      alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
      alert('子节点冒泡')
    }, false);
    c.addEventListener('click', function (e) {
      alert('子节点捕获')
    }, true);

    p.addEventListener('click', function (e) {
      alert('父节点捕获')
    }, true);
  </script>
</body>
</html>

<div id='one'>
  <div id='two'>
    <div id='three'>
      <div id='four'>
      </div>
    </div>
  </div>
</div>

//可看参数全是事件冒泡事件，点击one元素，输出one；点击two元素，输出two one;点击three元素，输出 three two one；点击four元素，输出 four three two one；
<script type='text/javascript'>
  var one=document.getElementById('one');
  var two=document.getElementById('two');
  var three=document.getElementById('three');
  var four=document.getElementById('four');
  one.addEventListener('click',function(){
    alert('one');
  },false);
  two.addEventListener('click',function(){
    alert('two');
  },false);
  three.addEventListener('click',function(){
    alert('three');
  },false);
  four.addEventListener('click',function(){
    alert('four');
  },false);
</script>

//点击four元素,最终执行结果为：one three four two
one.addEventListener('click',function(){
alert('one');
},true);
two.addEventListener('click',function(){
alert('two');
},false);
three.addEventListener('click',function(){
alert('three');
},true);
four.addEventListener('click',function(){
alert('four');
},false);


//点击two执行结果：one(因为是two的父元素支持捕获事件所以先执行)  two,bubble  two,capture(顺序执行，注意逗号不是间隔，是输出内容。)
//如果目标元素不是two，则two的两个事件按先捕获后冒泡触发执行，点击three执行结果：one two,capture three,bubble two,bubble
one.addEventListener('click',function(){
alert('one');
},true);
two.addEventListener('click',function(){
alert('two,bubble');
},false);
two.addEventListener('click',function(){
alert('two,capture');
},true);
three.addEventListener('click',function(){
alert('three,bubble');
},true);
four.addEventListener('click',function(){
alert('four');
},true);