addeventlistener事件第三個參數_JavaScript之進階事件

1.注冊事件的兩種方式

<body>
    <button>傳統注冊事件</button>
    <button>方法監聽注冊事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1  傳統注冊事件同一個索引隻能實作一個功能；如果寫兩個函數實作結果，後面一個結果會把前面
//結果覆寫。
        btns[0].onclick = function() {
            alert('11');
        }
        btns[0].onclick = function() {
                alert('22');
            }
            // 2. 事件偵聽注冊事件 addEventListener 
            // (1) 裡面的事件類型是字元串 必定加引号 而且不帶on
            // (2) 同一個元素 同一個事件可以添加多個偵聽器（事件處理程式）
        btns[1].addEventListener('click', function() {
            alert('11');
        })
        btns[1].addEventListener('click', function() {
            alert('22');
        })
    </script>
</body>

2.删除事件（解綁事件）的兩種方式

即通過點選按鈕，實作彈出框跳出。且該彈出框隻跳出一次，後面再點選此按鈕時，彈出框不再跳出。

<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid aqua;
            background-color: azure;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert('11');
                //1  傳統方式删除事件
                divs[0].onclick = null;
            }
            //2  rumoveEventListener 删除事件
        divs[1].addEventListener('click', fn); //裡面的fn不需要調用加小括号

        function fn() {
            alert('22');
            divs[1].removeEventListener('click', fn);
        }
        // 3  detachEvent    //用于低版本浏覽器的相容性
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert('33333');
            div[2].detachEvent('onclick', fn1);
        }
    </script>

3 DOM事件流

階段1：事件捕獲階段——》在整個程式中從大到小依次輸出所要輸出的内容。程式執行順序是：document-》HTML——》body——》father——》son

階段2：事件冒泡節點——》在整個程式中從小到大依次輸出所要輸出的内容。程式執行順序是：son》father》body>html>document

1. JS 代碼中隻能執行捕獲或者冒泡其中的一個階段。
 2. onclick 和 attachEvent（ie） 隻能得到冒泡階段。

3.1 捕獲階段

如果

addEventListener 第三個參數是 true 那麼則處于捕獲階段 document -> html -> body -> father -> son

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true)
    </script>
</body>

3.2. 冒泡階段

如果

addEventListener 第三個參數是 false 或者省略那麼則處于冒泡階段 son -> father ->body -> html -> document

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false)
    </script>
</body>

4 事件對象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt

事件對象的使用方法：

eventTarget.onclick = function(event) {
// 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt
}）

常見事件對象屬性和方法：

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常見事件對象的屬性和方法
        // 1. e.target 傳回的是觸發事件的對象（元素）  this 傳回的是綁定事件的對象（元素）
        // 差別 ： e.target 點選了那個元素，就傳回那個元素 this 那個元素綁定了這個點選事件，那麼就傳回誰
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我們給ul 綁定了事件  那麼this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我們點選的那個對象 誰觸發了這個事件 我們點選的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解相容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有個非常相似的屬性 currentTarget  ie678不認識
    </script>

addeventlistener事件第三個參數_JavaScript之進階事件

<body>
    <div>123</div>
    <a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="送出" name="sub">
    </form>
    <script>
        // 常見事件對象的屬性和方法
        // 1. 傳回事件類型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止預設行為（事件） 讓連結不跳轉 或者讓送出按鈕不送出
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标準寫法
            })
            // 3. 傳統的注冊方式
        a.onclick = function(e) {
            // 普通浏覽器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏覽器 ie678  returnValue  屬性
            // e.returnValue;
            // 我們可以利用return false 也能阻止預設行為 沒有相容性問題 特點： return 後面的代碼不執行了， 而且隻限于傳統的注冊方式
            return false;
            alert(11);
        }
    </script>
</body>

阻止冒泡

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son兒子</div>
    </div>
    <script>
        // 常見事件對象的屬性和方法
        // 阻止冒泡  dom 推薦的标準 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 傳播
            e.cancelBubble = true; // 非标準 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

addeventlistener事件第三個參數_JavaScript之進階事件

1.注冊事件的兩種方式

2.删除事件（解綁事件）的兩種方式

3 DOM事件流

4 事件對象

繼續閱讀

addeventlistener事件第三個參數_淺析 JavaScript 中的事件委托

a标簽點選事件_JS事件綁定的三種方法

js 異步執行_JS異步執行機制——事件循環（Event Loop）

a标簽點選事件_JavaScript 中常見HTML事件

addeventlistener事件參數_JavaScript 事件的傳播

addeventlistener事件第三個參數_《DOM事件機制》

addeventlistener事件第三個參數_JS DOM 事件流、事件冒泡

java菜單實作功能_js實作桌面右鍵，出現右鍵菜單功能開始：

addeventlistener事件參數_「React進階系列」史上最全React事件機制詳解架構總覽DOM事件流的三個階段關于React事件的疑問從React的事件機制源碼看整個流程

android stdio使用監聽器來實作按鈕事件_Java事件處理，低級事件類型：鍵盤事件+焦點事件，你真的懂嗎？...低級事件類型覺得文章不錯的話，可以轉發關注一下小編，小編每天都會持續更新的！

addeventlistener事件第三個參數_DOM事件的簡單思考

js button onclick 傳參_用js去寫一個簡單的購物車

js點選事件onclick_關于JavaScript的事件綁定問題

bootstrap 單選按鈕點選change事件隻觸發一次_UI設計幹貨：選框和按鈕的設計這樣做就對了！...

appcrash事件怎麼解決_React實戰—元件行為：React中的事件（4）