事件冒泡机制　　

事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

　　举个例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡</title>

    <script src="demo2.js"></script>

</head>

<body>

    <div id = "first" style="padding : 20px;background-color: #ff0;width: 150px;">

        <div id="second" style="background-color :#f00;width:100px;height:100px;border :1px dashed #000"></div>

    </div>

</body>

</html>
//demo2.js

window.onload = setupEvents;

function setupEvents(){

    document.getElementById("first").onmousedown=function(){

        alert("first element event");

    }

    document.getElementById("second").onmousedown=function(){

        alert("second element event");

    }

    document.onmousedown=function(){

        alert("document event");

    }

}

如果单击最里面的div元素，不论在什么浏览器中将弹出三个警告窗口，依次显示：

1.Second element event

2.First element event

3.Document event

取消事件冒泡机制

　　如果你有一个元素堆栈，且只希望一个元素触发该事件处理程序，可以取消事件冒泡机制。IE中的属性：cancelBubble，Mozila中的属性：stopPropagation。代码如下：

function stopEvent(evnt){

    if(evnt.stopPropagation){

        evnt.stopPropagation();

    }else{

     evnt.cancelBubble = ture;

    }

}

现在修改demo2.js中的first id的js代码：

//demo2.js

window.onload = setupEvents;

function setupEvents(){

//    document.getElementById("first").onmousedown=function(){

//        alert("first element event");

//    }

//

    document.getElementById("first").onmousedown=function(evnt){

    var theEvent = evnt ? evnt :window.event;

    alert("first element event");

    stopEvent(theEvent);

    }

    document.getElementById("second").onmousedown=function(){

        alert("second element event");

    }

    document.onmousedown=function(){

        alert("document event");

    }

}

function stopEvent(evnt){

    if(evnt.stopPropagation){

        evnt.stopPropagation();

    }else{

     evnt.cancelBubble = ture;

    }

}

然后试验，你会发现最后一个针对文档事件处理程序的警告窗口将不会影响，因为在时间到达栈顶之前，事件已经取消了。

JavaScript中的事件冒泡机制的更多相关文章

  1. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  2. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  3. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  4. Javascript中的事件冒泡与捕获

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...

  5. JavaScript中的事件冒泡？事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  6. javascript中的事件冒泡和事件捕获

    1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...

  7. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  8. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  9. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

随机推荐

  1. C++：对象的初始化和构造函数

    对象的初始化和构造函数 构造函数:是一种特殊的成员函数,它主要用于为对象分配空间,进行初始化.构造函数 的名字必须与类名相同,它不要用户来调用,而是在建立对象时自动执行的 形式一: 类名 对象名(实参 ...

  2. IIS下PHP的三种配置方式比较

    在Windows IIS 6.0下配置PHP,通常有CGI.ISAPI和FastCGI三种配置方式,这三种模式都可以在IIS 6.0下成功运行,下面我就讲一下这三种方式配置的区别和性能上的差异. 1. ...

  3. struts2中token防止重复提交表单

    struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>&g ...

  4. Oracle数据库ORA-12154: TNS: 无法解析指定的连接标识符详解

    ORA-12154: TNS: 无法解析指定的连接标识符(转自http://www.cnblogs.com/psforever/p/3929064.html) 相信使用过Oracle数据库的人一定碰到 ...

  5. Xcode 项目文件介绍

    一.项目文件结构示意图 二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要用来放依赖的框架 3.test文件夹是 ...

  6. Android Studio设置，鼠标放上去有提示

    设置如下: 1. 2. 勾选就可以了

  7. Android 中Activity生命周期分析(二)：从AActivity 到BActivity过程分析

    如果你没有动手去演示的话,你一定要去动手试试看,这个东西非学容易出错,面试中经常出现,好了,上代码: package com.king.review.base; import android.app. ...

  8. 1176. Hyperchannels（欧拉回路）

    1176 给定一有向图 求其反图的欧拉回路 路径输反了 一直WA.. #include <iostream> #include<cstdio> #include<cstr ...

  9. 1651. Shortest Subchain(bfs)

    1651 终于A了 看这题容易想到最短路 看到错的很多 还特意注意了好几处 后来发现 必须按给出的顺序出边 想了想 这不就是BFS 然后就是各种细节 i->i+1ori->j(a［i］＝＝ ...

  10. Firefox和Chrome浏览器导出书签

    Chrome浏览器: 或者直接在地址栏中输入:“chrome://bookmarks/#1”也可以 Firefox浏览器: