撇开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事件...
通过这种技术,我们可以对目标网页的DOM事件进行断点调试,从而获取更多关于事件触发和处理的信息。在本文中,我们将详细阐述 DOM 事件断点调试的原理和应用。 什么是 DOM 事件断点调试? DOM 事件断点调试是指在 ...
在JavaScript中,`event`对象包含了关于事件的各种信息,如`event.target`属性,它指的是事件的实际触发者,即事件源DOM节点。 例如,如果你在“描述”中提到的“评论区”元素上点击,可以在控制台看到`event`对象...
**手写DOM事件模型** 在Web开发中,DOM(Document Object Model)事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件,如点击、鼠标移动、键盘输入等。本篇文章将深入...
5. 在实际应用中,要注意事件的触发顺序和时序,以达到最接近用户操作的效果。 通过上述介绍,我们可以看到,使用JavaScript代码触发DOM事件,可以灵活地模拟用户在页面上的各种操作,这对于进行交互功能测试非常有...
在处理动态生成的DOM元素时,经常遇到一个常见的问题:这些元素不会触发onclick事件。为了解决这个问题,需要了解背后的原因以及相应的解决策略。 首先,传统的绑定事件方式,如直接在HTML元素上使用onclick属性,...
标题所指的知识点是IE浏览器环境下,动态添加DOM节点可能会无预期地触发window.resize事件,导致页面布局频繁地重新调整。而描述部分详细解释了这一问题出现的背景:页面布局使用了绝对定位,当窗口大小变化时,如果...
以编程方式触发DOM事件。 重写以获取npm + browserify支持。 例子 var triggerEvent = require ( 'trigger-event' ) ; triggerEvent ( document , 'keydown' , { key : 'enter' } ) ; triggerEvent ( 'keydown' , {...
### DOM事件的区别详解 在Web开发中,DOM(Document Object Model)事件处理是与用户交互的重要方式之一。本文将从DOM0级事件处理、DOM2级事件处理以及事件流、事件委托等方面进行深入探讨,帮助读者更好地理解这些...
通过合理地利用DOM事件,可以极大地提升用户体验,构建出更加动态和交互式的Web应用。 #### 二、DOM事件分类 DOM事件根据其作用的不同,可以分为以下几类: 1. **鼠标事件** 2. **键盘事件** 3. **框架/对象事件*...
在JavaScript的世界里,DOM事件管理是开发者们常用的一种机制,它允许我们响应用户与页面元素的交互。然而,当我们处理非DOM对象,如自定义组件或业务对象时,DOM事件模型并不适用。本文将探讨如何利用jQuery实现一...
JavaScript 是一种广泛用于网页和...随着DOM(文档对象模型)和现代浏览器的事件处理API的发展,现在可以通过addEventListener和removeEventListener方法更加灵活地管理和处理事件,提供更好的跨浏览器兼容性和性能。
压缩包内的"DOM事件"文件,很可能包含了多个示例,这些示例展示了如何使用JavaScript来处理DOM事件。DOM事件是用户或浏览器执行的交互行为,如点击按钮、提交表单或者滚动页面等。JavaScript通过监听这些事件并附加...
浏览器的超级简单编程 DOM 事件触发助手。 入门 npm install etrig etrig 旨在在 、 环境中使用: var trigger = require('etrig'); // the following will trigger a load event on [data-button] trigger...