您的位置：首页 > Web前端 > JavaScript

js中事件传播流程

2019-03-07 22:44 579 查看

js中事件传播流程

DOM事件流存在三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。

事件流：事件发生时，事件在元素节点与根节点之间的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。事件传播顺序的两种事件流模型：事件冒泡，事件捕获。

事件捕获（event capturing）：事件从最不确定的事件目标到最特定的事件目标。当鼠标点击或触发dom事件时，浏览器会从根节点开始有外向内进行事件传播，会先触发父元素，再触发子元素，由外向内层层递进。

事件冒泡（dubbed bubbling）：与事件捕获刚好相反，它是由内向外进行事件触发，即从最确定的事件到最不确定的事件。

dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

阻止事件传播

在支持addEventListener()的浏览器中，可以通过调用事件对象的preventDefault()方法取消事件的默认操作。IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果。下面一段代码是结合三种技术取消事件：

function cancelHandler(event){

var event=event||window.event;//兼容IE

//取消事件相关的默认行为

if(event.preventDefault) //标准技术

event.preventDefault();

if(event.returnValue) //兼容IE9之前的IE

event.returnValue=false;

return false; //用于处理使用对象属性注册的处理程序

}

事件委托

有的时候，需要将子元素的事件委托给父元素，当用js来生成子元素时，可以通过给父元素添加事件委托，来给未来元素添加事件。

<body>
<ul>
<li></li>
</ul>
<input  type="button" value="添加" id="btn" />

<script type="text/javascript">

var btn=document.getElementById("btn");
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li");

//	通过事件源可以给通过点击事件产生的li也添加点击事件
oUl.onclick=function(e){

var evt=e ||event;
var _target=	evt.target ||evt.srcElement;
//判断事件源是否是li
if(_target.nodeName.toLowerCase()=="li"){
console.log("aa");
}
}
btn.onclick=function(){
for(var i=0;i<5;i++){
var aLi=document.createElement("li");
oUl.appendChild(aLi);
}
}
</script>

阻止事件冒泡引用：https://www.geek-share.com/detail/2713691347.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航