JS案例25-addEventListener( )事件原理解析

源碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>賦詩</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
    fn("click",fn1,btn);
    fn("click",fn2,btn);
    fn("click",fn3,btn);


    function fn1(){
        console.log("1");
    }
    function fn2(){
        console.log("2");
    }
    function fn3(){
        console.log("3");
    }

    //原理(了解)(自己封裝一個)(click)
    function fn(str,fn,ele){
        //判斷位置要注意:如果進入綁定事件本身,那么該事件已經(jīng)本綁定了
        //所以獲取舊的事件必須在新的事件綁定之前
        var oldEvent = ele["on"+str];
            console.log(oldEvent)
        // console.log(oldEvent)
        ele["on"+str] = function () {
            //不能直接執(zhí)行函數(shù),因為我們還不知道以前有沒有綁定我同樣的事件
            //進行判斷,如果以前有過綁定事件,那么把以前的執(zhí)行完畢在執(zhí)行現(xiàn)在的事件,如果沒有就直接執(zhí)行
            //如果沒有被定義過事件該事件源的該事件屬性應(yīng)該是null對應(yīng)的boolean值是false
            //如果已經(jīng)定義過事件該事件源的該事件屬性應(yīng)該是function本身對應(yīng)的boolean值是true
            if(oldEvent){
                //因為oldEvent本身他就是函數(shù)本身,那么后面加一個();就是執(zhí)行函數(shù)
                oldEvent();
                fn();
            }else{
                //沒有綁定過事件
                fn();
            }
        }
    }

</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容