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

更新日期: 2017-11-28阅读: 2.6k标签: js事件

Javascript与html之间的交互是通过事件实现。

一、事件流

事件,是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流,描述的是页面中接受事件的顺序。IE9,chrome,Firefox,Opera,Safari均实现了dom2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式。

事件冒泡

事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Event Bubbling Example</title>
    </head>
    <style type="text/css">
        #myDiv{
            width:100px;
            height:100px;
            background-color:#FF0000;
        }
    </style>
    <body>
        <div id="myDiv"></div>
    </body>    
</html>

当用户点击了<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。若在<div>和<body>上都定义了click事件,如下:

<script type="text/javascript">
        var div=document.getElementById("myDiv");
        div.onclick=function(event){
            alert("div");
        };
        document.body.onclick=function(event){
            alert("body");
        };    
</script>

点击<div>,将先输出“div”,再输出“body”。

IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。

事件捕获

事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。当用户点击了<div>元素,采用事件捕获,则click事件将按照document—><html>—><body>—><div>的顺序进行传播。

若在<div>和<body>上都定义了click事件,如下:

<script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.addEventListener("click",function(event){
            alert("div");
        },true);
        document.body.addEventListener("click",function(event){
            alert("body");
        },true);
        
    </script>

(注:addEventListener具体使用见本文DOM2级事件处理)

点击<div>,将先输出“body”,再输出“div”。

IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。

DOM事件流

"DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。以上面的HTML页面为例,单击<div>元素将按照下图触发事件:


若在<div>和<body>上都定义了click事件,如下:

<script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.onclick=function(event){
            alert("div");
        };
        document.body.addEventListener("click",function(event){
            alert("event bubble");
        },false);
        document.body.addEventListener("click",function(event){
            alert("event catch");
        },true);
        
    </script>

点击<div>,将先输出“event catch”,再输出“div”,最后输出“event bubble”。


二、事件处理程序

事件是用户或浏览器自身执行的某种动作,而响应某个事件的函数叫做事件处理程序。HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头,DOM2级事件处理程序不需要加“on”。

HTML事件处理程序

通过将事件作为HTML元素的属性来实现,包含以下两种方法:

<input type="button" value="confirm" onclick="alert('confirm')" />

或者调用其他地方定义的脚本:

<script type="text/javascript">
        function showMessage() {
            alert("confirm");
        }
</script>
<input type="button" value="confirm" onclick="showMessage()"/>

(注:函数定义必须放在调用之前)

DOM0级事件处理程序

 通过Javascript指定事件处理程序的传统方式,所有浏览器均支持。每个元素(包括window,document)都有自己的事件处理程序属性,但是必须在DOM节点加载完之后才会有效。如下所示:

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert("div");
        };
    </script>

使用DOM0级方法指定的事件处理程序被认为是元素的方法,在元素的作用域中运行。this引用当前元素,如下:

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert(this.id);
        };
    </script>

输出“myDiv”。

删除通过DOM0级方法指定的事件处理程序:div.onclick=null;

DOM2级事件处理程序

IE9,chrome,Firefox,Opera,Safari均实现了DOM2级事件处理程序,绑定事件方法addEventListener()接收三个参数:事件名称,事件处理函数和一个布尔值。布尔值为true,则表示在捕获阶段调用事件处理程序;如果为false,则表示在冒泡阶段调用事件处理程序。addEventListener允许在同一个元素上添加多个事件处理程序,如下所示:

    <script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.addEventListener("click", function(event) {
            alert("event bubble");
        }, false);
        div.addEventListener("click", function(event) {
            alert("event catch");
        }, true);
    </script>

先输出“event bubble”,后输出“event catch”,说明addEvenListener绑定的处理程序执行顺序和绑定顺序相同。

通过DOM2级事件处理程序指定的方法,this也引用当前元素,如下:

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.addEventListener("click", function(event) {
            alert(this.id);
        }, false);
    </script>

输出“myDiv”。

删除DOM2级事件处理程序,采用removeEventListener(),删除时传入的参数必须和绑定时传入的参数相同,不能传入匿名函数。如下所示:

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        var handler=function(event){
            alert("delete");
        };        
        div.addEventListener("click",handler,false);
        div.removeEventListener("click",handler,false);
    </script>

IE事件处理程序

IE8和IE8以下的版本不支持addEventListener(),而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener(),同时也兼容IE8的attachEvent()方法,但是IE9和IE8对attachEvent()的实现有点不同。如下所示:

    <script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.attachEvent("onclick", function(event) {
            alert("1");
        });
        div.attachEvent("onclick", function(event) {
            alert("2");
        });
    </script>

IE9和IE10先输出“1”,再输出“2”,而IE8和IE7先输出“2”,再输出“1”。

删除IE事件处理程序,采用detachEvent(),删除时传入的参数必须和绑定时传入的参数相同,不能传入匿名函数。如下所示:

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        var handler = function(event) {
            alert("delete");
        };
        div.attachEvent("onclick",handler);
        div.detachEvent("onclick",handler);
    </script>

总结:attachEvent()采用冒泡方式,而addEventListener()可以采用冒泡或事件捕获方式。

先按由上往下的顺序执行事件捕获的执行程序,再执行目标元素的执行程序,最后按由下往上的顺序执行冒泡事件。代码如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Event Bubbling Example</title>
    </head>
    <style type="text/css">
        #child {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    </style>
    <body>
        <div id="parent">
            <div id="child"></div>
        </div>
    </body>
    <script type="text/javascript">
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");
        child.onclick = function(event) {
            alert("child");
        };
        document.body.addEventListener("click", function(event) {
            alert("body:event bubble");
        }, false);
        parent.attachEvent("onclick", function(event) {
            alert("parent:event bubble");
        });
        document.body.addEventListener("click", function(event) {
            alert("body:event catch");
        }, true);
        parent.addEventListener("click", function(event) {
            alert("parent:event catch");
        }, true);
    </script>
</html>

输出顺序:body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble

 

链接: https://www.fly63.com/article/detial/185

通过原生js对DOM事件的绑定的几种方式总汇

在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。

js操作DOM事件中event的target和currentTarget的区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。

js中的事件委托或是事件代理详解

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

Javascript - 事件顺序

“假设一个元素及其祖先元素的事件句柄指向了同一事件,哪个先触发?”不出意料,这取决于浏览器。

你知道哪些html事件不能冒泡?

我们都知道一般事件的流程是:事件捕捉——>目标元素发生事件——>事件冒泡。但是不是所有的事件和click事件都一样是冒泡的,那么如何判断给事件是否不能冒泡呢?

js动态元素绑定事件_jquery、原生js实现动态添加新元素_监听事件

在实现click绑定事件的时候,发现只能对已经加载好的元素进行绑定,如果后来通过js动态插入的元素则无法绑定事件

js 按键监听_JS实现监听组合按键

有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。下面简单梳理一下思路,我们所熟悉的按键有这么集中类型:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!