JS——事件的綁定與解綁

時間 2019-11-29

原文原文鏈接

一、綁定形式html

ele.addEventListener(evtName, fn)
ele["on" + evtName] = function () {}
ele.onclick = function () {}

二、addEventListener：事件監聽器。原事件被執行的時候，後面綁定的事件照樣被執行，不會被層疊掉瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>綁定事件</button>
<script>
    var btnEle = document.getElementsByTagName("button")[0];
    bindEvt2(btnEle, "click", fn1);
    bindEvt2(btnEle, "click", fn2);

    function fn1() {
        console.log("你是美麗的人");
    }

    function fn2() {
        console.log("你是個壞人");
    }
    
    function bindEvt2(ele, evtName, fn) {
        ele.addEventListener(evtName, fn);
    }
</script>
</body>
</html>

//九尺龍泉萬卷書，上天生我意何如。
//不能報國平天下，枉爲男兒大丈夫。

注意事項：ele["on" + evtName]與ele.onclick綁定的方式會層疊到以前的事件函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>點擊</button>
<script>
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function () {
        console.log("你是美人");
    }
    btn["onclick"]=function () {
        console.log("謝謝呀");
    }
</script>
</body>
</html>

//謝謝呀

三、addEventListener原理：之因此能夠不層疊以前註冊事件，主要是判斷以前是否註冊了此類事件，若是註冊了就先執行此事件spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>點擊</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        console.log("你是美人");
    }
    addEvent(btn, "click", fn);

    function addEvent(ele, evtName, fn) {
        var oldEvnet = ele["on" + evtName];//若是進入綁定事件自己，那麼該事件已經本綁定了，因此獲取舊的事件必須在新的事件綁定以前
        ele["on" + evtName] = function () {
            //若是沒有被定義過事件該事件源的該事件屬性應該是null對應的boolean值是false
            //若是已經定義過事件該事件源的該事件屬性應該是function自己對應的boolean值是true
            if (oldEvnet) {
                oldEvnet();//由於oldEvent自己他就是函數自己，那麼後面加一個();就是執行函數
                fn();
            }
            else {
                fn();
            }
        }
    }

    function fn() {
        console.log("謝謝呀")
    }
</script>
</body>
</html>

//你是美人
//謝謝呀

四、事件綁定的兼容寫法code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>賦詩</button>
<script>
    var btn = document.getElementsByTagName("button")[0];

//    火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

//    IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

    //兼容寫法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //經過判斷調用的方式兼容IE678
            //判斷瀏覽器是否支持該方法，若是支持那麼調用，若是不支持換其餘方法
            if(ele.addEventListener){
                //直接調用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的狀況下，用此代碼
                ele["on"+str] = fn;
            }
        }
    }

    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")

    function fn1(){
        console.log("九尺龍泉萬卷書，上天生我意何如。");
    }
    function fn2(){
        console.log("不能報國平天下，枉爲男兒大丈夫。");
    }

</script>
</body>
</html>

//九尺龍泉萬卷書，上天生我意何如。
//不能報國平天下，枉爲男兒大丈夫。

五、事件解綁方式htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>點擊</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        console.log("你是美人");
    }
    btn.onclick = null; </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>賦詩</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    EventListen = {
        addEvent: function (ele, fn, str) {
            //經過判斷調用的方式兼容IE678
            //判斷瀏覽器是否支持該方法，若是支持那麼調用，若是不支持換其餘方法
            if (ele.addEventListener) {
                //直接調用
                ele.addEventListener(str, fn);
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + str, fn);
            } else {
                //在addEventListener和attachEvent都不存在的狀況下，用此代碼
                ele["on" + str] = fn;
            }
        },
        removeEvent: function (ele, fn, str) {
            if (ele.removeEventListener) {
                ele.removeEventListener(str, fn);
            } else if (ele.detachEvent) {
                ele.detachEvent("on" + str, fn);
            } else {
                ele["on" + str] = null;
            }
        }
    }
    EventListen.addEvent(btn, fn, "click");
    EventListen.removeEvent(btn, fn, "click");

    function fn() {
        alert(1);
    }
</script>
</body>
</html>

注意事項：ele.onclick只能用ele.onclick=null，removeEvent只能解綁addEventListener，detachEvent只能解綁attachEvent。blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。