一.js的事件捕获和事件冒泡机制
在js中先要执行事件捕获然后再执行事件冒泡
同时,事件捕获是由父节点逐渐向子节点传播,而事件冒泡是由子节点逐渐向父节点传播.
<script type="text/javascript"> var p = document.getElementById('p'), c = document.getElementById('c'); c.addEventListener('click', function () { alert('子节点冒泡') }, false); c.addEventListener('click', function () { alert('子节点捕获') }, true); p.addEventListener('click', function () { alert('父节点捕获') }, true); p.addEventListener('click', function () { alert('父节点冒泡') }, false); </script>
上面的代码详细的解释了,关于事件冒泡和事件捕获的触发顺序.
二.关于addEventListener和attachEvent的区别
1.addEventListener
适用于FF浏览器
target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
2.attachEvent
适用于IE浏览器
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
三.事件移除
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
相关推荐
JavaScript事件机制详细研究
添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同
在 很多语言的学习中,“事件”...javascript中的事件处理也是相同,正因为有了事件处理,才会出现 ajax拖动的效果。本文就讨论一下javascript中的事件处理,读过之后,您就会知道,很多ajax框架实现拖动效果的原理了。
js事件绑定机制1
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
1、超简单JavaScript自定义对象的自定义事件机制示例。 2、带示例及详细注释,总共40行左右的代码。支持多播、任意多个参数。 3、不需要定义和引用其它任何东东。
本文将详细介绍nodeJS事件机制与events事件模块的使用方
消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的,只不过有些实现的方式要复杂一点。我们deviceone统一就叫消息. ...
react native 触摸事件机制详解,及高仿微信通讯录功能。
主要介绍了Javascript 事件冒泡机制详细介绍的相关资料,需要的朋友可以参考下
事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些...
js--事件循环机制.doc
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发⽣时执⾏,⽐如当⽤户点击某个 HTML 元素时。
2、事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。3、事件捕获事件捕获的思想是不太具体的节点...
主要介绍了JS 事件机制,结合完整实例形式分析了JavaScript事件响应机制、原理与使用技巧,需要的朋友可以参考下
整理浏览器运行机制,包括:GUI渲染线程、js引擎线程、事件触发线程、定时触发器线程和http异步请求线程等知识
本文实例讲述了js事件机制—-捕获与冒泡机制。分享给大家供大家参考,具体如下: 先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现, 语法格式如下: element.addEventListener(event, function...
上面例子的html文件 博文链接:https://zhyt710.iteye.com/blog/227892