JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要），这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。直接看下面实例
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
</style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
<div id="id2" style="height:200px; border:1px solid #000;">
<div id="id3" style="height:50px; border:1px solid #000;"></div>
</div>
</div>
</body>
<script type="text/javascript">
var obj1=document.getElementById('id1');
obj1.addEventListener('click',function(){
alert('id1');
},false); var obj2=document.getElementById('id2');
obj2.addEventListener('click',function(){
alert('id2');
},true); var obj3=document.getElementById('id3');
obj3.addEventListener('click',function(){
alert('id3');
},true);
/*如果第三个参数为true，则事件在捕获阶段执行，如果第三个参数为false，则事件在冒泡阶段执行*/
</script>
</html>
当点击id3元素时候，执行结果是：id2，id3，id1
解析：因为obj2与obj3绑定的方法在捕获阶段执行，obj1的事件在冒泡阶段执行。
总结
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段，必须要理解
不过我们可以通过绑定事件时，指定事件执行时间是在冒泡阶段还是捕获阶段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡阶段执行
bool:true，代表捕获阶段执行
JS在默认情况下获取事件后，就开始从根元素开始捕获所有该事件的监听对象，然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；
阻止默认行为
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
关于JS 事件冒泡和onclick,click,on()事件触发顺序
onclick,click,on()的优先关系：onclick>click>on()；
onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；
on()绑定的事件，总是晚于onclick和click绑定的事件触发；
JS中绑定事件顺序（事件冒泡与事件捕获区别）的更多相关文章
- WPF教程六：理解WPF中的隧道路由和冒泡路由事件
WPF中使用路由事件升级了传统应用开发中的事件,在WPF中使用路由事件能更好的处理事件相关的逻辑,我们从这篇开始整理事件的用法和什么是直接路由,什么是冒泡路由,以及什么是隧道路由. 事件最基本的用法 ...
- 深入理解Node.js中的垃圾回收和内存泄漏的捕获
深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转】JavaScript 事件顺序：冒泡和捕获
补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
- JS中函数执行顺序的问题？
作者:知乎用户链接:https://www.zhihu.com/question/23564807/answer/82996422来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
随机推荐
- opencv学习笔记2
import cv2 as cvimport numpy as np"""#图像加法运算 即像素加法 (结果图=图1+图二) (两个图像必须是等大等类型的)image = ...
- TX2中设备树烧写
将要修改的设备树文件拷贝到下面的目录替换相应的文件 ../64_TX2/Linux_for_Tegra_tx2/kernel/dtb 用micro-USB线连接TX2上的USB OTG口和PC机的US ...
- Android 对话框的应用1
1.介绍 2.作用 (1)消息提示对话框 (2)简单列表对话框 (3)单选列表对话框 (4)多选对话框 (5)自定义对话框 3.java后台代码 package com.lucky.test28dia ...
- 数独求解问题（DFS+位运算优化）
In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller 3 × 3 subgrids. For exa ...
- D. Magic Gems（矩阵快速幂 || 无敌杜教）
https://codeforces.com/contest/1117/problem/D 题解:有一些魔法宝石,魔法宝石可以分成m个普通宝石,每个宝石(包括魔法宝石)占用1个空间,让你求占用n个空间 ...
- HDU - 1520 树形DP入门题
写了两种DP,第一种是按照自己习惯来xjb敲的,第二种参考别人 熟悉一下树形DP的套路 dp[i][]是维护i及以下的关系最优值的,所以我觉得两次DP记忆搜索之间不清-1应该是正确的(也就做了一次加法 ...
- an concreate example
Step 1: Creating Parts 1. Split the geometry 2. Create the INLET part. 3. Create the OUTLET part. 4. ...
- Oracle 中 Cursor 介绍
一 概念 游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁盘的表中调到计算机内存中进行处理,最后将处理 ...
- CAPL编程实现诊断刷写，车联网FOTA流程自动化测试（代码篇）
原创内容,转载请注明出处 接上篇,本文主要讲CAPL编程详细实现,软件环境CANoe 11.0 一.Simulation Setup 1.建模之前,首先创建一个.DBC文件.如果不会,可以用一个 ...
- js中的table导出成Excel表格
首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...