关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

假设在我们页面有这么一段标签：


代码如下:

<body>
　　<div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div>
</body>

现在在页面加入这么一段脚本：


代码如下:

<script type="text/javascript">

window.onload=function(){　　//在各个层级的元素上绑定事件
　　window.onclick=func;
　　document.onclick=func;
　　document.getElementById("timeDiv").onclick=func;
　　document.body.onclick=func;
}
function func(){　　//响应函数，输出响应的元素
　　document.getElementById("timeDiv").innerHTML+=this+"<br>";
}

在firefox以及IE 8下打开页面，在标签testDiv（灰色方块）上单击，结果分别如下截图：

　　
firefox下结果

IE 8下结果

可以看到，两者结果并不相同？究竟为什么会这样呢？
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）
（1）在IE 6以及后续版本，冒泡事件支持的层级达到document对象。
（2）在firefox（准确的说应该是Mozilla1.0以及更高版本），对冒泡事件的支持一直上升到window窗口对象。
于是就造成了上面事件响应结果的不同。

另外，有个有意思的地方不知道你注意到了没有？就是事件目标的响应顺序。（冒泡事件的响应顺序。。。好像有点废话）我们知道，firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。在这里明显事件处理函数作用在了冒泡阶段。也就是说，如果我们采用传统的直接给事件处理函数属性赋值的话，比方说：


代码如下:

document.body.onclick=func;

事件处理函数将被添加到事件的冒泡阶段。

以上就是对于IE、firefox里面冒泡事件响应层级的一点介绍，同时顺带介绍了采用传统事件处理函数直接赋值的默认处理。详细的讲解可参见大牛Nicholas C. Zakas所著的《javascript高级程序设计》。

PS：以上内容仅仅为个人读书笔记，如有错漏，随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得！

赞 (0)

相关推荐

  • 深入分析js的冒泡事件

    深入分析js的冒泡事件

    在javascript的dom操作做肯定会遇到js的冒泡事件,最常见的是div弹窗事件如图解 当点击灰色部分是弹窗消失,点击黑色部分时没有效果. 通过下面一段代码来分析js的冒泡事件 html代码: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>js冒泡事件</title

  • JS冒泡事件的快速解决方法

    何为冒泡事件就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作.但是父div的onclick事件同样会被触发.这就造成了事件的多层并发,导致了页面混乱.这就是冒泡事件. 消除冒泡事件的方法阻止JavaScript事件冒泡传递(cancelBubble .stopPropagation) 下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果 复制代码 代码如下: <ht

  • Js 冒泡事件阻止实现代码

    1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: 复制代码 代码如下: $(document).ready(function(

  • javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • js事件冒泡、事件捕获和阻止默认事件详解

    js事件冒泡、事件捕获和阻止默认事件详解

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

  • js 冒泡事件与事件监听使用分析

    冒泡事件 js中"冒泡事件(bubble)"并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,"冒泡算法"在编程里是一个经典问题,冒泡算法里面的"冒泡"应该说是交换更加准确:js里面的"冒泡事件"才是真正意义上的"冒泡",它从DOM最低层逐层遍历树,然后附加相应事件.以下面代码为例: 冒泡事件 function Add(sText) { document.getElementById("

  • Js冒泡事件详解及阻止示例

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: 复制代码 代码如下: <html> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script> function ialertdouble(e) { alert('inner

  • JS冒泡事件与事件捕获实例详解

    本文实例分析了JS冒泡事件与事件捕获.分享给大家供大家参考,具体如下: 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> <script type="text/javascript"> window.onload = function(){ window.onclick = function(){ alert("Window"); // 顶

  • JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 复制代码 代码如下: function stopBubble(e){  if(e&&e.stopPropagation){//非IE   e.stopPropagation();  }  else{//IE   window.event.cancelB

  • js之事件冒泡和事件捕获详细介绍

    js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开

随机推荐