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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。