js事件流的传播流程

最新推荐文章于 2022-11-25 11:50:10 发布

y向日葵

最新推荐文章于 2022-11-25 11:50:10 发布

阅读量289

点赞数

分类专栏：事件流文章标签： JavaScript事件流的传播流程

本文链接：https://blog.csdn.net/qq_38058176/article/details/88323557

版权

事件流专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js事件流的传播流程

  事件流：描述的是从页面接收事件的顺序

  1.事件流分为：事件冒泡（微软）和 事件捕获（Netscape）。
  
  2. 事件冒泡:即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）.
 
  3. 捕获事件流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件.

  OM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件冒泡的应用：事件委托（事件代理）

例子：

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			li{
    				background: red;
    				margin: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="list">
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    		<input type="button" value="更多" id="btn">
    		<script type="text/javascript">
    			var oList = document.getElementById("list");
    			var oBtn = document.getElementById("btn");
    			var aLi = oList.children;
    
    			oList.onclick = function(e){
    				var evt = e || event;
    				var _target = evt.target || evt.srcElement;
    				if(_target.nodeName.toLowerCase() == "li"){
    					console.log("aa");
    				}
    			}
    			oBtn.onclick = function(){
    				for(var i = 0; i < 5; i++){
    					var oLi = document.createElement("li");
    					oList.appendChild(oLi);
    				}
    
    			}
    		</script>
    	</body>
    </html>

  这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击
事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，要想使只有点击li的时候
触发事件，就需要用到 Event对象提供了一个属性叫target，可以返回事件的目标节点，
我们成为事件源.

阻止事件冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();
相当于
if(e.stopPropagation) {
  e.stopPropagation();
}else {
  e.cancelBubble = true;
}

事件处理程序

1. HTML事件处理程序

  这里的HTML事件处理程序指的是直接在HTML元素里面通过特性(attribute)定义的事件处理程序.

2. DOM0级事件处理程序

  较为传统的方式：把一个函数值赋值给一个事件处理程序的属性。这种方法用的比较多，
主要是因为它简单而且支持跨浏览器；

3. DOM2级事件处理程序

  DOM2级的事件添加事件监听：addEventListener()和 attachEvent()（IE浏览器）

  和移除事件监听：removeEventListener()和detachEvent()（IE浏览器）。
  分别有三个参数:
    1. 事件名（无‘on’）
    2. 事件处理程序的函数
    3. 布尔值（false:冒泡；true:捕获）

  注：
    1. DOM0、DOM2级都可以给一个元素添加多个事件和多个事件处理程序，其中多个事件处理程序按照添加顺序执行。
    2. IE8及更早的浏览器版本只支持事件冒泡。

事件对象

  在触发DOM上的某个事件时，都会产生一个事件对象event。只有在事件处理程序执行期间，
event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。

（1）.DOM中的事件对象（兼容DOM的浏览器会将一个event对象传入到事件处理程序中）
      1、type属性：用于获取事件类型；
      2、target属性：用于获取事件目标；
      3、stopPropagation（）方法：用于阻止事件冒泡；
      4、preventDefault（）方法：阻止事件的默认行为；
（2）.IE中的事件对象
      1、type属性：用于获取事件类型；
      2、srcElement属性：用于获取事件的目标；
      3、cancelBubble属性：用于阻止事件冒泡；
      4、returnValue属性：用于阻止事件的默认行为；

y向日葵

关注

0
点赞
踩
0

收藏

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

js事件流的传播流程事件流描述的是从页面接收事件的顺序 1.事件流分为：事件冒泡（IE）和事件捕获（Netscape）。 2. 事件冒泡:即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）. 3. 捕获事件流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件. OM2级事件规定事件流包括三个阶...
复制链接

扫一扫

专栏目录