JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法。分享给大家供大家参考，具体如下：

事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。

1. 原生事件的发生顺序

一般来讲，当为一个a标签添加click事件以后，点击这个标签，会先执行绑定的事件、后跳转页面。一个input绑定blur事件以后，你在input里输入完内容，点击提交按钮，会先发生blur事件，后发生click事件。当然，这是一般来讲。我在一个React项目中曾经发生表单提交时，先发生click事件，blur事件没有来得及发生，造成表单内容没有检验就提交到后台，原因我至今没有找到，解决办法是在click事件上加一个50ms的延迟。

2. 自定义事件

JavaScript中也支持手动触发事件，请看下面代码。

a.addEventListener('click', function(){
  console.log(input.value);
  console.log(this.getAttribute('href'));
  console.log(location.href);
}, false); //a是我已经通过id获得好的一个a标签
var event = document.createEvent('HTMLEvents'); // initEvent接受3个参数: 事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent('click', true, true);
event.eventType = 'click';
//触发a上绑定的自定义事件
a.dispatchEvent(event);
//注：jQuery中有更简单的trigger()方法实现自定义事件功能

JavaScript中自定义事件的类型有（即document.createEvent('HTMLEvents')中的参数）：

1. UIEvents：一般化的UI事件。
2. MouseEvents：一般化的鼠标事件。
3. MutationEvents：一般化的DOM变动事件。
4. HTMLEvents：一般化的HTML事件。

自定义事件的发生比较容易控制，你什么时候触发(dispatchEvent/fireEvent)它，它就什么时候发生。

3. 绑定多个事件，且由用户行为触发

这个情况最复杂，也是标题中的情况：父元素与子元素都绑定多个事件，且有的事件在捕获阶段、有的事件在冒泡阶段。

下面这个例子，父元素div绑定两个事件（一个冒泡阶段、一个捕获阶段），子元素也是这种情况。事件触发顺序如何。

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function(){
  console.log('bubble','btn');
},false);
btn.addEventListener('click', function(){
  console.log('capture','btn');
},true);
div.addEventListener('click', function(){
  console.log('bubble','div');
},false);
div.addEventListener('click', function(){
  console.log('capture','div');
},true);

执行结果：

乍一看这个结果有些乱，但仔细分析可以得出结论：

绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • zepto.js中tap事件阻止冒泡的实现方法

    本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

  • js如何取消事件冒泡

    复制代码 代码如下: function stopBubble(e) { //如果传入了对象,那么就是非IE浏览器,才用W3C标准方法 if (e || e.stopPropagation) { e.stopPropagation(); } else { //才用IE的停止事件冒泡的方法 window.event.CancelBubble = true; } }

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • javascript事件冒泡详解和捕获、阻止方法

    一.事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 复制代码 代码如下: ----------------------------------- | element1                        | |   -------------------------     | |   |element2               |     | |   -------------------------     | |                 

  • js冒泡、捕获事件及阻止冒泡方法详细总结

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结. 事件冒泡是一个从子节点向祖先节点冒泡的过程: 事件捕获刚好相反,是从祖先节点到子节点的过程. 给一个jquery点击事件的例子: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>test</title> <head> <scrip

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • JavaScript 捕获窗口关闭事件

    1.用javascript重新定义 window.onbeforeunload() 事件 在javascript里定义一个函数即可 function window.onbeforeunload() { alert("关闭窗口")} alert()事件将会在关闭窗口前执行,你也可以用户决定是否关闭窗口 function window.onbeforeunload() { if (event.clientX>document.body.clientWidth && e

  • Javascript 事件捕获的备忘(setCapture,captureEvents)

    这段时间一直在给QZone研究Js拖放的问题.今天突然发现live.com的模块拖放居然可以跨出浏览器.到底是什么方法让 mousemove 和 mouseup 事件可以到浏览器外也可以触发,于是把整个live的js down下来分析,结果发现是一个小小的函数在做"怪" . object.setCapture() 当一个object的被 setCapture 后,他的方法将会被继承到整个文档进行捕获.   当不需要把方法继承到整个文档捕获时,要用 object.releaseCaptu

  • JS冒泡事件的快速解决方法

    何为冒泡事件就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作.但是父div的onclick事件同样会被触发.这就造成了事件的多层并发,导致了页面混乱.这就是冒泡事件. 消除冒泡事件的方法阻止JavaScript事件冒泡传递(cancelBubble .stopPropagation) 下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果 复制代码 代码如下: <ht

  • js event事件的传递与冒泡处理

    复制代码 代码如下: <div> <table nclick="gotClick(event,'table',this)" id="table"> <tr nclick="gotClick(event,'tr',this)" id="tr"> <td nclick="gotClick(event,'td',this)" id="td"> &

  • JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 复制代码 代码如下: function stopBubble(e){  if(e&&e.stopPropagation){//非IE   e.stopPropagation();  }  else{//IE   window.event.cancelB

  • js之事件冒泡和事件捕获详细介绍

    js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

随机推荐