`
yxc_gdut
  • 浏览: 97292 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

奇怪的DOM事件触发顺序

阅读更多

  撇开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, 两个事件会按照定义顺序执行。

 

  • 大小: 35.6 KB
  • 大小: 17.5 KB
分享到:
评论

相关推荐

    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事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM...

    JavaScript之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事件...

    js逆向实战之DOM事件断点调试

    通过这种技术,我们可以对目标网页的DOM事件进行断点调试,从而获取更多关于事件触发和处理的信息。在本文中,我们将详细阐述 DOM 事件断点调试的原理和应用。 什么是 DOM 事件断点调试? DOM 事件断点调试是指在 ...

    chrome根据事件找到dom.zip如何根据网页上发生的事件,而找事件源,也就是说找出是dom结点触发的事件

    在JavaScript中,`event`对象包含了关于事件的各种信息,如`event.target`属性,它指的是事件的实际触发者,即事件源DOM节点。 例如,如果你在“描述”中提到的“评论区”元素上点击,可以在控制台看到`event`对象...

    手写DOM事件模型

    **手写DOM事件模型** 在Web开发中,DOM(Document Object Model)事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件,如点击、鼠标移动、键盘输入等。本篇文章将深入...

    详解用js代码触发dom事件的实现方案

    5. 在实际应用中,要注意事件的触发顺序和时序,以达到最接近用户操作的效果。 通过上述介绍,我们可以看到,使用JavaScript代码触发DOM事件,可以灵活地模拟用户在页面上的各种操作,这对于进行交互功能测试非常有...

    动态生成的DOM不会触发onclick事件的原因及解决方法

    在处理动态生成的DOM元素时,经常遇到一个常见的问题:这些元素不会触发onclick事件。为了解决这个问题,需要了解背后的原因以及相应的解决策略。 首先,传统的绑定事件方式,如直接在HTML元素上使用onclick属性,...

    IE之动态添加DOM节点触发window.resize事件

    标题所指的知识点是IE浏览器环境下,动态添加DOM节点可能会无预期地触发window.resize事件,导致页面布局频繁地重新调整。而描述部分详细解释了这一问题出现的背景:页面布局使用了绝对定位,当窗口大小变化时,如果...

    trigger-event:以编程方式触发DOM事件

    以编程方式触发DOM事件。 重写以获取npm + browserify支持。 例子 var triggerEvent = require ( 'trigger-event' ) ; triggerEvent ( document , 'keydown' , { key : 'enter' } ) ; triggerEvent ( 'keydown' , {...

    DOM事件的区别

    ### DOM事件的区别详解 在Web开发中,DOM(Document Object Model)事件处理是与用户交互的重要方式之一。本文将从DOM0级事件处理、DOM2级事件处理以及事件流、事件委托等方面进行深入探讨,帮助读者更好地理解这些...

    HTML DOM 事件.pdf

    通过合理地利用DOM事件,可以极大地提升用户体验,构建出更加动态和交互式的Web应用。 #### 二、DOM事件分类 DOM事件根据其作用的不同,可以分为以下几类: 1. **鼠标事件** 2. **键盘事件** 3. **框架/对象事件*...

    jQuery技巧之让任何组件都支持类似DOM的事件管理

    在JavaScript的世界里,DOM事件管理是开发者们常用的一种机制,它允许我们响应用户与页面元素的交互。然而,当我们处理非DOM对象,如自定义组件或业务对象时,DOM事件模型并不适用。本文将探讨如何利用jQuery实现一...

    js触发事件大全

    JavaScript 是一种广泛用于网页和...随着DOM(文档对象模型)和现代浏览器的事件处理API的发展,现在可以通过addEventListener和removeEventListener方法更加灵活地管理和处理事件,提供更好的跨浏览器兼容性和性能。

    DOM.zip_DOM_www.692dom,com

    压缩包内的"DOM事件"文件,很可能包含了多个示例,这些示例展示了如何使用JavaScript来处理DOM事件。DOM事件是用户或浏览器执行的交互行为,如点击按钮、提交表单或者滚动页面等。JavaScript通过监听这些事件并附加...

    etrig:浏览器的超级简单编程DOM事件触发助手

    浏览器的超级简单编程 DOM 事件触发助手。 入门 npm install etrig etrig 旨在在 、 环境中使用: var trigger = require('etrig'); // the following will trigger a load event on [data-button] trigger...

Global site tag (gtag.js) - Google Analytics