jQuery 事件流的概念

時間 2019-11-19

標籤 jquery 事件概念欄目 JQuery 简体版

原文原文鏈接

jQuery 事件流的概念javascript

什麼是事件流html

　　DOM事件流java

　　1. 事件捕獲階段;瀏覽器

　　2.處於目標階段;函數

　　3.事件冒泡階段;spa

<!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>

　　1, 　　addEventListenercode

　　addEventLIstener 是DOM2級事件新增的指定事件處理程序的操做, 這個方法接受3個參數: 要處理的事件名,做爲事件處理程序的函數和一個布爾值. 最後這個布爾值參數若是是true, 表示在捕獲階段調用事件處理程序; 若是是false, 表示在冒泡階段調用事件處理程序.htm

　　2,　　document、documentElement和document.body三者之間的關係：對象

document表明的是整個html頁面；blog

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

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

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

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

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

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

須要注意的點：因爲老版本的瀏覽器不支持事件捕獲，所以在實際開發中須要使用事件冒泡，在由特殊須要時再使用事件捕獲

補充知識瞭解便可：