DOM事件流之js事件冒泡与事件捕获

最新推荐文章于 2023-04-16 18:57:59 发布

Courage-lu

最新推荐文章于 2023-04-16 18:57:59 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_45846805/article/details/105939994

版权

DOM事件流模型

dom兼容浏览器汇中，事件流分为三个阶段：
（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。
DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

<div class="text">
  	<p class="inner">点击我！</p>
  </div>

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

事件捕获与事件冒泡原型图

在这里插入图片描述
由于当时网景和微软的主张不同，w3c采用折中方式，制定了统一的标准——先捕获在冒泡
addEventListener有三个参数：
element.addEventListener(event,function,useCapture)
event:需要绑定的事件
function：触发事件后需要执行的函数
useCapture：默认值为false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

事件冒泡案例

<body>
  <div id="parent">
    父元素
    <div id="child">
      子元素
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    document.body.addEventListener("click",function(e){
      console.log("click-body");
    },false);

    parent.addEventListener("click",function(e){
      console.log("click-parent");
    },false);

    child.addEventListener("click",function(e){
      console.log("click-child");
    },false);
  </script>
</body>

点击子元素时的结果为：
在这里插入图片描述
通过addEventListener方法，采用事件冒泡方法给dom元素注册单击事件
所以此时事件冒泡的触发事件的顺序是由内到外，此时虽然只点击子元素，但是它的父元素也会触发相应的事件，因为子元素在父元素里面。如果点击子元素不想触发父元素的事件可使用event.stopPropagation()方法（阻止冒泡）此时冒泡阶段停止

child.addEventListener("click",function(e){
　　console.log("click-child");
  　e.stopPropagation();
},false);

事件捕获案例

<body>
  <div id="parent">
    父元素
    <div id="child">
      子元素
    </div>
  </div>
  
  <script type="text/javascript">
    var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.body.addEventListener("click",function(e){
  console.log("click-body");
  },false);

parent.addEventListener("click",function(e){
  console.log("click-parent---事件传播");
},false);
    　　　　 
　　　　 //新增事件捕获事件代码
parent.addEventListener("click",function(e){
  console.log("click-parent--事件捕获");
},true);

child.addEventListener("click",function(e){
  console.log("click-child");
},false);

  </script>
</body>

点击子元素时的结果：
在这里插入图片描述
整个事件的流程：
父元素通过事件捕获的方式注册了click事件，所以在事件捕获阶段就会触发，然后到了目标阶段，即事件源，之后进行事件传播，parent同时也用冒泡方式注册了click事件，所以这里会触发冒泡事件，最后到根节点。

事件委托(事件代理)

基本概念：
事件委托，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。以此减少了内存的消耗

<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		...
		<li>n</li>
	</ul>

此时有的很多的列表项需要一一去绑定一个函数，这个对于内存消耗是比较大的，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul上，然后在执行事件的时候再去匹配判断目标元素。
实现案例：

<body>
	<ul id="list" style="list-style: none">
		<li class="class-1">1</li>
		<li class="class-1">2</li>
		<li class="class-1">3</li>
		<li class="class-1">4</li>
	
	</ul>

	<script>
		document.getElementById('list').addEventListener('click', function (e) {
	  // 兼容性处理
	  var event = e || window.event;
	  var target = event.target || event.srcElement;
	  if (target.matches('li.class-1')) {
	    console.log('the content is: ', target.innerHTML);
	  }
	});
		
	</script>
	
</body>

在这里插入图片描述

由此可见事件委托是可以减少很多重复的工作！

Courage-lu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流之js事件冒泡与事件捕获

DOM事件流模型dom兼容浏览器汇中，事件流分为三个阶段：（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开...
复制链接

扫一扫