前端 ----js的事件流的概念（重要）

時間 2019-11-12

原文原文鏈接

09-JS的事件流的概念(重點)

在學習jQuery的事件以前，你們必需要對JS的事件有所瞭解。看下文javascript

事件的概念

HTML中與javascript交互是經過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的，就須要瞭解一下「事件流」的概念。html

什麼是事件流

事件流描述的是從頁面中接收事件的順序java

一、DOM事件流jquery

「DOM2級事件」規定的事件流包括三個階段：瀏覽器

① 事件捕獲階段；函數

② 處於目標階段；post

③ 事件冒泡階段學習

那麼其實呢，js中還有另一種綁定事件的方式：看下面代碼：url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

當咱們點擊這個btn的時候，看看頁面都輸出了什麼：spa

在解釋輸出結果爲何是這樣以前，還有幾個知識點須要瞭解一下便可：

一、addEventListener

addEventListener 是DOM2 級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

二、document、documentElement和document.body三者之間的關係：

document表明的是整個html頁面；

document.documentElement表明的是<html>標籤；

document.body表明的是<body>標籤；

接着咱們就來聊聊上面的例子中輸出的結果爲何是這樣：

在標準的「DOM2級事件」中規定，事件流首先是通過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段。這裏能夠畫個圖示意一下:

首先在事件捕獲過程當中，document對象首先接收到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的實際目標，就是id爲btn的a標籤。

接着在事件冒泡過程當中，事件開始時由最具體的元素（a標籤）接收，而後逐級向上傳播到較爲不具體的節點（document）。