從零開始學 Web 之 DOM（六）為元素繫結與解綁事件

阿新 • • 發佈：2019-01-15

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
部落格園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、為元素繫結多個事件

前導：如果一個按鈕綁定了多個點選事件，那麼點選按鈕的時候只會執行最後一個點選事件，前面的點選事件都被覆蓋了。那麼如何為一個按鈕繫結多個相同的事件，並且每個事件都會執行呢？

1、為元素繫結多個事件

<body>
    <input type="button" value="按鈕1" id="btn1">
    <input type="button" value="按鈕2" id="btn2">
    <!-- <div id="dv"></div> -->

    <script src="common.js"></script>
    <script>
        // 引數有3個
        // 引數1：事件的型別（事件的名字），不要on
        // 引數2：事件處理函式（命名函式或者匿名函式）
        // 引數3：false

        // 相容性：chrome，firefox支援，IE8不支援
        my$("btn1").addEventListener("click", function() {
            alert("1");
        },false)
        my$("btn1").addEventListener("click", function() {
            alert("2");
        },false)
        my$("btn1").addEventListener("click", function() {
            alert("3");
        },false)

        // 引數有2個
        // 引數1：事件的型別（事件的名字），要on
        // 引數2：事件處理函式（命名函式或者匿名函式）

        // 相容性：chrome，firefox不支援，IE8支援
        my$("btn2").attachEvent("onclick", function() {
            alert("4");
        });
        my$("btn2").attachEvent("onclick", function() {
            alert("5");
        });
        my$("btn2").attachEvent("onclick", function() {
            alert("6");
        });
    </script>
</body>

繫結事件的方式：

addEventListener: chrome，firefox支援，IE8不支援

attachEvent: chrome，firefox不支援，IE8支援

2、繫結事件相容程式碼

<body>
    <input type="button" value="按鈕" id="btn">

    <script src="common.js"></script>
    <script>
        // 為任意元素新增任意事件
        function addAnyEventListener(element, type, func) {
            if(element.addEventListener) {
                element.addEventListener(type, func, false);
            } else if(element.attachEvent) {
                element.attachEvent("on"+type, func);
            } else {
                element["on"+type] = func;
            }
        }

        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件1");
        });
        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件2");
        });
        addAnyEventListener(my$("btn"), "click", function() {
            console.log("事件3");
        });
    </script>
</body>

my("dv").onclick == my$("dv")["onclick"]

3、繫結事件的區別

方法名不同；
引數個數不同，addEventListener有三個引數，attachEvent有兩個引數；
addEventListener中事件的型別沒有 on，attachEvent中事件的型別有on；
chrome,firefox 支援 addEventListener ，IE8不支援；

chrome,firefox 不支援 attachEvent ，IE8支援；
事件中的 this 不同，addEventListener 中的 this 是當前繫結的物件；

attachEvent 中的 this 是 window。

二、為元素解綁事件

1、三種方式

1.1、方式一

如果使用 元素.onclick = function(){}; 的方式繫結物件的話，解綁的方式為 元素.onclick = null;

1.2、方式二

如果使用 元素.addEventListener("click", f1, false); 的方式繫結物件的話，解綁方式為 元素.removeEventListener("click", f1, false);

注意：這裡面不能使用匿名函式，因為需要同一個事件處理函式，而兩個匿名函式是兩個不同的函式，所以需要使用命名函式。

1.3、方式三

如果使用 元素.attachEvent("onclick", f1); 的方式繫結物件的話，解綁方式為 元素.detachEvent("onclick", f1);

2、解綁事件相容程式碼

// 為任意元素繫結任意事件
function addAnyEventListener(element, type, func) {
    if(element.addEventListener) {
        element.addEventListener(type, func, false);
    } else if(element.attachEvent) {
        element.attachEvent("on"+type, func);
    } else {
        element["on"+type] = func;
    }
}

// 為任意元素解綁任意事件
function removeAnyEventListener(element, type, funcName) {
    if(element.removeEventListener) {
        element.removeEventListener(type, funcName, false);
    } else if(element.detachEvent) {
        element.detachEvent("on"+type, funcName);
    } else {
        element["on"+type] = null;
    }
}

示例：

<body>
    <input type="button" value="按鈕" id="btn1">
    <input type="button" value="按鈕" id="btn2">

    <script src="common.js"></script>
    <script>
        function f1() {
            console.log("第一個");
        }
        function f2() {
            console.log("第二個");
        }
        addAnyEventListener(my$("btn1"), "click", f1);
        addAnyEventListener(my$("btn1"), "click", f2);

        my$("btn2").onclick = function () {
            removeAnyEventListener(my$("btn1"), "click", f1);
        }
        
    </script>
</body>

從零開始學 Web 之 DOM（六）為元素繫結與解綁事件

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 jQuery（六）為元素繫結多個相同事件，解綁事件

一、為元素繫結多個相同事件 1、方式一 $("#btn").click(function () { console.log("click1"); }).click(function () { console.log("click2"); }).cli

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、對樣式的操作

從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、相容程式碼 1

從零開始學 Web 之 DOM（五）元素的建立

從零開始學 Web 之 DOM（七）事件冒泡

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > +------------------------------------------------------------ > github：https://github.com/Dao

從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、DOM概念 D

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

從零開始學 Web 之 ES6（六）ES6基礎語法四

實現 fine 開始 isf 原理 mat 系列教程 include number 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二元素.width(屬性

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 DOM（六）為元素繫結與解綁事件

一、為元素繫結多個事件

1、為元素繫結多個事件

2、繫結事件相容程式碼

3、繫結事件的區別

二、為元素解綁事件

1、三種方式

1.1、方式一

1.2、方式二

1.3、方式三

2、解綁事件相容程式碼

相關推薦