js事件的传播流程

最新推荐文章于 2021-10-09 15:15:24 发布

qq_975443629

最新推荐文章于 2021-10-09 15:15:24 发布

阅读量221

点赞数 2

分类专栏： js 事件文章标签： js事件传播流程事件捕获事件冒泡

本文链接：https://blog.csdn.net/qq_42039970/article/details/88323274

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

事件

1 篇文章 0 订阅

订阅专栏

js事件的传播

1、什么是事件？
js事件是由访问web页面的用户引起的一系列操作，当用户执行某些操作时，再去执行一系列代码或用来获取事件的详细信息。
常见的事件类型请参考：http://www.w3school.com.cn/jsref/jsref_events.asp
2、事件的传播概述:
事件根据事件模型规定的传播路径被逐级传递, 在传播过程中依次触发对应的事件监听器, 然后被继续传递. 直到完成事件传播, 或是传播过程被终止。
3、事件的传播分为三个阶段：

捕获阶段（capture phase）：在捕获阶段时从最外层的祖先元素（window对象），向目标元素进行事件的捕获，但是默认此时不会触发事件；

document
< html>
< body>
< div>
事件捕获过程中，document对象首先接受click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即div元素。

2.目标阶段（target phase）：事件捕获到目标元素，捕获结束开始在目标元素上触发事件；
3.冒泡阶段（bubble phase）：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件；（通俗来讲就是元素A中有子元素B，B元素的事件触发了，那么A元素相同的事件也会触发）
document
< html>
< body>
< div>
也就是说，click事件首先在div元素上发生，然后click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播至document对象。
首先发生的是事件捕获，为截获事件提供了机会。
然后是实际的目标接收到事件。
然后冒泡阶段发生，事件又传播回文档。

4、怎么阻止事件传播？
阻止事件冒泡的兼容性方法：

function stopBubbles(e){
var evt=e || window.event;
if(evt.stopProgagation){
evt.stopPropagation();//ie8及以下版本不支持
}else{
evt.cancelBubble=true; //火狐不支持
}
}

阻止默认行为的兼容性方法：

 function preventDefault(e){
    var evt=e || window.event;
    if (typeof evt.preventDefault != 'undefined') {//w3c
    	evt.preventDefault();
     } else{
    		evt.returnValue = false;//ie
    	}
   }

事件冒泡案例：

	<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>
	  <style>
	    .outer {
	      width: 300px;
	      height: 300px;
	      background: red;
	    }
	    .inner {
	      width: 200px;
	      height: 200px;
	      background: blue;
	    }
	    .content {
	      width: 100px;
	      height: 100px;
	      background: greenyellow;
	    }
	  </style>
	</head>
	<body>
	  <div class="outer">outer
	    <div class="inner">inner
	        <div class="content">content</div>
	    </div>
	  </div>
	  <script src="../public/js/jquery.min.js"></script>
	  <script>
	    $(function(){
	      $('.outer').click(function(){
	        console.log('outer');
	      })
	      $('.inner').click(function(){
	        console.log('inner');
	      })
	      $('.content').click(function(){
	        console.log('content');
	      })
	    })
	 </script>
</body>

点击content输出如下：
在这里插入图片描述

qq_975443629

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件的传播流程

js事件的传播1、什么是事件？js事件是由访问web页面的用户引起的一系列操作，当用户执行某些操作时，再去执行一系列代码或用来获取事件的详细信息。常见的事件类型请参考：http://www.w3school.com.cn/jsref/jsref_events.asp2、事件的传播概述:事件根据事件模型规定的传播路径被逐级传递, 在传播过程中依次触发对应的事件监听器, 然后被继续传递. 直...
复制链接

扫一扫

专栏目录