撇开IE的时间处理机制,DOM level2 的事件触发机制是先捕获再上浮。
之前测试过,原来浏览器执行DOM事件并非严格按照先捕获再上浮的顺序,
看看下面代码:
<!DOCTYPE HTML> <html> <head> <title>事件触发顺序</title> <meta http-equiv="content-type" content="text/html; charset=GB2312"> <style type="text/css"> #outer{width:200px;border:3px solid red;color:#f00;padding:0.5em;} #inner{border:3px solid green;color:#00f;padding:0.5em;} </style> </head> <body> <div id='outer'> this is outer div <div id='inner'> this is inner div </div> </div> <script type='text/javascript'> window.onload=function(){ var body = document.body; var outer_el = document.getElementById('outer'); var inner_el = document.getElementById('inner'); body.addEventListener('click',func1,true); outer_el.addEventListener('click',func2,true); inner_el.addEventListener('click',func3,true); inner_el.addEventListener('click',func4,false); outer_el.addEventListener('click',func5,false); body.addEventListener('click',func6,false); } function func1(){ console.log('事件1'); } function func2(){ console.log('事件2'); } function func3(){ console.log('事件3'); } function func4(){ console.log('事件4'); } function func5(){ console.log('事件5'); } function func6(){ console.log('事件6'); } </script> </body> </html>
上面代码点击inner元素,执行结果正常
稍微将事件定义的顺序调整下
body.addEventListener('click',func1,true); outer_el.addEventListener('click',func2,true); inner_el.addEventListener('click',func4,false); inner_el.addEventListener('click',func3,true); outer_el.addEventListener('click',func5,false); body.addEventListener('click',func6,false);
再次点击inner元素
inner元素里面的两个事件执行顺序就没有遵循先捕获后上浮的顺序,而是看哪个先定义。
我把outer的两个事件调换定义顺序,点击inner的时候,outer的两个时间定义顺序正常,假如点击outer, 两个事件会按照定义顺序执行。
相关推荐
DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM...
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
chrome根据事件找到dom.zip 如何根据网页上发生的事件,而找事件源,也就是说找出是dom结点触发的事件
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。 提示: 在 W3C 2 级 DOM 事件中规范了事件模型。
以编程方式触发DOM事件。 重写以获取npm + browserify支持。 例子 var triggerEvent = require ( 'trigger-event' ) ; triggerEvent ( document , 'keydown' , { key : 'enter' } ) ; triggerEvent ( 'keydown' , {...
下面小编就为大家带来一篇动态生成的DOM不会触发onclick事件的原因及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
浏览器的超级简单编程 DOM 事件触发助手。 入门 npm install etrig etrig 旨在在 、 环境中使用: var trigger = require('etrig'); // the following will trigger a load event on [data-button] trigger...
其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规则的(包括事件捕获和可选的冒泡过程)...
DOM事件的区别
DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段...
DOM事件总结(教辅).pdf
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 ... dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!
通过原生JavaScript实现一个简单的DOM事件模型,关于该资源的描述请参考:http://blog.csdn.net/gameloft9/article/details/51228191
目录(一)DOM事件流① 定义② 图解③ 历史(二)冒泡(三...事件发生时会在元素节点之间按照特定的顺序传播,这个传播的过程就是DOM事件流 简单的说:事件的传播过程即DOM事件流 ② 图解 原创文章 7获赞 9访问量 455
详细介绍HTML DOM事件
Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-...DOM事件冒泡与Angular可以无缝工作,具体示例如下: import { Component } from '@angular/core'; @Component({ selector: 'exe-app',
DOM事件流的示意图,清晰的展示了DOM事件流的捕获过程,以及冒泡过程
DOM事件的级别DOM事件的级别,准确来说,是DOM标准定义的级别。DOM2的写法:【重要】上面的第三参数中,true表示事件在捕获阶段触发,false表示事件