addEventListener及事件流

时间 2019-11-08

标签 addeventlistener 事件繁體版

原文原文链接

addEventListenerjavascript

定义和用法css

addEventListener 用于向指定元素添加事件句柄（又称事件处理函数）html

语法java

element.addEventListener(event, function, useCapture)函数

element 文档节点，duocument，window。this

event 必须有。是一个字符串，指定事件名（通常不使用“on前缀”，例如“click，mouseover”）。spa

function 必须有。指定要事件触发时执行的函数（能够是函数，也能够是函数名）。code

useCapture 可选。布尔值（true 或者false）指定事件是否在捕获阶段仍是在冒泡阶段执行,通常状况下默认值为false htm

一、若是为true则事件句柄在捕获阶段执行对象

二、若是为false则事件句柄在冒泡阶段执行

实例

经过点击按钮改变背景色(主要代码):

document.getElementById("Btn").addEventListener("click",function(){
 document.getElementById("box").style.backgroundColor = 'green';
});

实例

能够在文档中添加多个事件，添加的事件不会覆盖已存在的事件，该下实例演示了如何在<button>元素中添加两个点击事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #box{
        width:50px;
        height:50px;
        background-color: red;
    }
</style>
<body>
    <div id="box">
    </div>
    <button id="Btn">点击</button>
    <script type="text/javascript">
       document.getElementById("Btn").addEventListener("click",function(){
           document.getElementById("box").style.backgroundColor = 'green';
       });
       document.getElementById("Btn").addEventListener("click",function(){
          this.style.backgroundColor = 'red';
       });
    </script>
</body>
</html>

实例

能够经过函数名来引用外部函数（主要代码）：

    document.getElementById("Btn").addEventListener("click",changeColor ,true);
       function changeColor(){
           document.getElementById("box").style.backgroundColor = 'green';
       }

有useCapture值时：就要想到 addEventListener－事件流

当一个事件发生时，会有三个阶段

捕获触发从根节点开始挨个往下，检测每一个节点是否检查是否调用了事件处理函数。若是调用了事件处理函数，而且 useCapture 为 true，则调用该事件处理函数。

目标触发触发在目标对象自己调用了事件处理函数。

冒泡触发从目标节点到根节点，检测每一个节点是否调用了事件处理函数。若是调用了事件处理函数，而且 useCapture 为 false，则调用该事件处理函数。

一、捕获时，如下执行结果为 2,1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="Btn">点击</button>
    <script type="text/javascript">
        //捕获时触发， 当useCapture为true时触发,所以如下执行的结果是2,1
        var btn=document.getElementById('Btn');
        btn.addEventListener('click',function(){alert('1');},false);
        document.body.addEventListener('click', function(){alert('2');},true); //捕获时触发
    </script>
</body>
</html>

二、冒泡时，如下执行结果为1,2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="Btn">点击</button>
    <script type="text/javascript">
        //冒泡时触发， 当useCapture为false时触发,所以如下执行的结果是1,2
        var btn=document.getElementById('Btn');
        btn.addEventListener('click',function(){alert('1');},false);
        document.body.addEventListener('click', function(){alert('2');},false); //冒泡时触发
    </script>
</body>
</html>