js 事件冒泡与阻止冒泡、事件委托

最新推荐文章于 2024-03-31 18:09:13 发布

zhenzuo_x

最新推荐文章于 2024-03-31 18:09:13 发布

阅读量788

点赞数

分类专栏：前端 JavaScript 文章标签：事件

本文链接：https://blog.csdn.net/zhenzuo_x/article/details/83447837

版权

前端同时被 2 个专栏收录

27 篇文章 3 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

一.定义

事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

二. 关于事件冒泡与阻止事件冒泡的用法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS事件基础</title>
    <style>
    div{
      padding: 100px;
    }
    #div2{
      width: 400px;
      height:300px;
      background: #ccc;
      display: none;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      var oBtn=document.getElementById('btn');
      var oDiv=document.getElementById('div2');
 
      oBtn.onclick=function(ev){
        alert("我是按钮啊！");
        ev.cancelBubble = true;  //阻止事件冒泡！（注释掉此行代码将出现两个alert框！）
      };
      document.onclick=function(){
        alert("我是文档啊！");
      };
    }
    </script>
  </head>
  <body>
    <button type="button" name="button" id='btn'>点我哦</button>
    <div id='div2'></div>
  </body>
</html>

当对按钮注册事件处理程序时，如果未阻止事件继续向上冒泡，将出现两个alert框，如果添加此行代码，将在此处阻止事件冒泡！

三. 关于事件委托的用法

<!DOCTYPE html>
<head>
	<title>下拉列表的实现</title>
	<style>
		#content{
			display: none;
		}
		li{
			list-style-type: none;
		}
	</style>
</head>

<body>
	<input type="text" name="select" id="select">
	<div id="content">
		<ul>
			<li>第一个列表点击我</li>
			<li>第二个列表点击我</li>
			<li>第三个列表点击我</li>
			<li>第四个列表点击我</li>
		</ul>
	</div>
	<script>
		window.onload = function (){
			var input = document.getElementById("select");
			var content = document.getElementById("content");
		
		input.onclick = function(e) {
			content.style.display = 'block';
			e.cancelBubble = true;   //阻止事件冒泡！
		}
		document.onclick = function(e) {
			content.style.display = 'none';
		}
		content.onclick = function(e) {  //事件委托！
			alert(e.target.innerHTML);
			e.cancelBubble = true; 
		}
	}

	</script>
</body>

在上述代码中，点击输入框即出现相应的列表内容，点击空白处，列表将消失。

此时需要注意应该在输入框的事件处理程序中做好阻止冒泡工作，若未阻止冒泡，此触发将向上延伸到文档层次，即列表又会被设置为none, 这样就会达不到我们想要的效果。

而关于其中的事件委托，如果不通过事件委托，我们要实现点击相应的 li 即出现相应的事件的话，即需为每个 li 注册相应的事件处理程序，可能会用到 for 循环等等，此时的性能并不是好的，当用事件委托时，即可管理其所有 li 的事件处理程序，达到性能优化的作用！

zhenzuo_x

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 事件冒泡与阻止冒泡、事件委托

一.定义事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。二. 关于事件冒泡与阻止事件冒泡的用法：...
复制链接

扫一扫

专栏目录