JavaScript的事件流

時間 2019-11-17

標籤 javascript 事件欄目 JavaScript 简体版

原文原文鏈接

1、前言

事件就是文檔或者瀏覽器窗口中發生的一些特定的交互瞬間。咱們能夠用偵聽器（或者事件處理程序）來預約事件，這樣當監測到事件發生時就能執行響應的代碼了。javascript

2、事件

事件是JS引擎內置的、預先定義的函數變量
事件有可能由瀏覽器觸發，也可能由用戶觸發
當事件觸發時，JS引擎會按照必定的規則調用這些變量中的函數
事件可編程

3、事件綁定

1. 第一種

onType = function(e) {
    // more codes
}
複製代碼

特色：瀏覽器兼容性好css

缺點：過於老舊，只能綁定一個函數，等同於寫在DOM上的attributehtml

注意：Type表明事件類型java

2. 第二種

eventTarget.addEventListener(Type, function() {
    // more codes
}, true/false);
複製代碼

特色：能夠綁定多個函數，同一個函數只能綁定一次git

缺點：IE9及如下不支持github

注意：事件監聽函數的第三個參數，若是是true表明在捕獲階段調用該事件處理程序，false表明在冒泡階段調用事件處理程序。編程

3. 第三種

element.attachEvent(onType, function() {
    // more codes
});
複製代碼

優勢：能夠綁定多個函數，同一函數能夠綁定屢次瀏覽器

缺點：只有IE支持此標準函數

4、事件解綁

分別對應以上三種綁定方式的解綁方法：ui

onType = null;
eventTarget.removeEventListener(Type, function() {...}, true/false);
element.detachEvent(onType, function() {...});

5、事件流

DOM的事件流分爲三個階段：

捕獲階段：事件從Document節點自上而下向目標節點傳播的階段（1-4）
目標階段：真正的目標節點正在處理事件的階段（4-6）
冒泡階段：事件從目標節點自上而下向Document節點傳播的階段（6-10）

注意：DOM事件的觸發順序是：首先事件捕獲，而後是事件處理執行，最後是事件冒泡。

6、取消冒泡事件

1. 方式

W3C：event.stopPropagation();
IE&Chrome: e.cancelBubble = true;

2. 案例

1. 事件綁定，返回事件源

這裏默認爲false，在冒泡階段執行事件處理程序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js事件流</title>
<style> #outer { border: 2px solid red; padding: 20px; } #box { border: 2px solid green; padding: 20px; } #myDiv { border: 1px solid #000; text-align: center; width: 100%; height: 100%; } </style>
</head>
<body>
    <div id="outer">outer
        <div id="box">box
            <div id="myDiv">myDiv</div>
        </div>
    </div>
    <script> var outer = document.getElementById('outer'); var box = document.getElementById('box'); var myDiv = document.getElementById('myDiv'); outer.addEventListener('click', function(e) { console.log('1. outer 冒泡'); e = e || window.event; // 後一種爲兼容IE的寫法 var target = e.target || e.srcElement; console.log(target); // 返回目標元素（事件源） }, false); box.addEventListener('click',function(e) { console.log('2. box 冒泡'); e = e || window.event; var target = e.target || e.srcElement; // 後一種爲兼容IE的寫法 console.log(target); }, false); myDiv.addEventListener('click', function(e) { console.log('3. myDiv 冒泡'); e = e || window.event; var target = e.target || e.srcElement; console.log(target); }, false); </script>
</body>
</html>
複製代碼

1.1 點擊myDiv區域

解析：冒泡順序：myDiv => box => outer => document => window；事件源爲myDiv。

1.2 點擊box區域

解析：冒泡順序：box => outer => document => window；事件源爲box。

1.3 點擊outer區域

解析：冒泡順序：outer => document => window；事件源爲outer。

2. 取消冒泡事件

這裏試着取消box的冒泡事件。當咱們點擊box區域時，應該僅僅返回「2. box 冒泡」的打印結果。

box.addEventListener('click',function(e) {
    console.log('2. box 冒泡');
    e = e || window.event;
    var target = e.target || e.srcElement; // 後一種爲兼容IE的寫法
    console.log(target);

    // 冒泡事件取消
    if(e.stopPropagation) { // W3C標準
        e.stopPropagation();
    }else { 
        e.cancelBubble = true; // IE & Chrome支持
    }
}, false);
複製代碼

2.1 點擊box區域

結果顯示，取消box的冒泡事件成功。

7、默認事件

咱們知道在點擊某些控件或者元素時，會出現刷新頁面的效果，這些事件就是默認事件。典型的默認事件有：

表單提交
a標籤的跳轉
點擊右鍵彈出菜單

8、取消默認事件

在咱們開發的過程當中，咱們每每不須要這些觸發的默認事件。那麼如何取消呢？

1. 方式

onType: return false;
W3C: event.preventDefault();
IE: event.returnValue = false;

2. 案例

這裏以取消右鍵菜單的默認事件爲例。

1. 第一種方式

document.oncontextmenu = function() {
    console.log('right click');
    return false;
}
複製代碼

2. 第二種方式

document.addEventListener('contextmenu', function(e) {
    console.log('addEventListener contextmenu');
    e = e || window.event;
    if(e.preventDefault) {
        e.preventDefault();
    }else {
    e.returnValue = false;
    }
}, false);
複製代碼