件流
JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。有时候这不是我们想要的，我们只需要某个特定的元素响应我们的绑定事件就可以了。
事件分类
捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）
捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示：
冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到呢，如果我们想要在非 IE 浏览器中要创建捕获型事件，只需将 addEventListener 的第三个参数设为true就好了。
ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数，这样：
- 当点击#div1（蓝色区域）时，应该会alert出”div1″
- 当点击#div2（黄色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
冒泡型事件例子：
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
06 |
<script type="text/javascript">
|
08 |
function Add(sText,objText)
|
10 |
document.getElementById("Console").innerHTML +=sText + "执行顺序：" + i + "<br />" + "<hr />";
|
17 |
<body onclick="Add('body事件触发<br />','body')">
|
18 |
<div onclick="Add('div事件触发<br />','div')">
|
19 |
<p onclick="Add('p事件触发<br />','p')" style="background:#c00;">点击</p>
|
21 |
<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>
|
从这个例子我们可以很清楚的看到事件冒泡是从目标元素 P 一直上升到 body 元素。
阻止事件冒泡
如下有一个函数兼容了 IE 和其它浏览器的阻止事件冒泡
1 |
function stopBubble(e) {
|
3 |
if ( e && e.stopPropagation )
|
8 |
window.event.cancelBubble = true;
|
在 IE 并没有 stopPropagation 方法，但我们可以通过 window.event.cancelBubble 来阻止事件冒泡。
监听函数
IE : attachEvent、detachEvent
非IE: addEventListener、removeEventListener
除了上面四个函数还有一个比较通用的方法是 document.getElmentById(元素ID).onclick = function(){}
事件对象
当触发事件，在监听函数执行函数里怎样才可以获取事件对象呢？在IE 中用window.event.srcElement而在非IE浏览器则用e.currentTarget
例代码：
01 |
btn.onclick = ctdClickEvent; |
03 |
function ctdClickEvent(e)
|
07 |
var readonly = "readOnly";
|
08 |
var obj = window.event.srcElement;
|
13 |
var readonly = "readonly";
|
14 |
var obj = e.currentTarget;
|
17 |
var id = obj.id.replace("btn_","");
|
19 |
if( obj.value=="此项改为不续费" )
|
分享到：
相关推荐
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
事件模型及其原理 Backbone.Events就是事件实现的核心，它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象，通过trigger触发事件。可以脱离Backbone的MVC，在自定义...
主要介绍了JavaScript解析机制与闭包原理,结合实例形式详细分析了javascript解析机制相关概念、功能、用法以及闭包的原理、定义、使用方法,需要的朋友可以参考下
主要介绍了JavaScript的闭包机制,针对内嵌函数的变量访问等问题分析了JS的闭包,需要的朋友可以参考下
主要内容目录如下： ...笔试题——JavaScript事件循环机制（event loop、macrotask、microtask） 五.异步编程 理解 JavaScript 的 async/await JavaScript异步编程 9k字 | Promise/async/Generator实现原理解析
你可能听说过JAVA、.NET、PHP这些语言有垃圾回收的内存管理机制，但是很少会听到JavaScript也有自己的内存管理机制，JavaScript同样有着类似的垃圾回收功能。本文主要讲述了JavaScript的垃圾回收原理和具体的过程。 ...
主要介绍了JavaScript的查询机制LHS和RHS解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。 那么JavaScript是怎么来进行解析的吗？它的执行顺序又是...
本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。
事件循环Event Loop:浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而定制的工作机制。 2.宏任务Task: 代表一个个离散的、独立的工作单位。浏览器完成一个宏任务，在下一个宏任务开始执行之前，会对页面...
13.1.2 浏览器的事件驱动机制 13.2 基本事件处理 13.2.1 事件和事件类型 13.2.2 事件的绑定 13.2.3 直接调用事件处理函数 13.2.4 事件处理函数的返回值 13.2.5 带参数的事件响应及其例子...
闭包是ECMAScript （JavaScript）最强大的特性之一，但用好闭包的前提是必须理解闭包。闭包的创建相对容易，人们甚至会在...而闭包工作机制的实现很大程度上有赖于标识符（或者说对象属性）解析过程中作用域的角色。
javascript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中的使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手动跟踪内存的使用情况，这是造成许多问题的一个根源。在编写...
刚接触到JavaScript的时候，便知道JavaScript是按顺序执行的，是如浏览器的解析DOM树一样的流程，解析DOM结构的时候，如果遇到JS脚本或者外联脚本便会停止解析，继续下载脚本之后，执行脚本，然后再解析DOM。...
JavaNIO库Selector机制解析.docx
本文着重解析javascript类继承机制，让你从底层了解javascript是怎样实现“继承”这一概念的。