事件監(jiān)聽(tīng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件監(jiān)聽(tīng)</title>
</head>
<body>
    <!-- 結(jié)構(gòu) -->
    <p onclick="alert(this.innerHTML)">DOM0</p>
    <p id="dom1">DOM1</p>
    <p id="page">DOM2</p>
</body>
    <script>
        // 獲取元素
        var dom1=document.getElementById('dom1');
        // DOM1級(jí)事件的添加方法
        dom1.onclick=function(){
            alert(this.id);//dom1
        }

        /*
            事件綁定的三種對(duì)象
            1.DOM事件，將事件添加到DOM元素對(duì)象上
            2.window事件，將事件添加到window對(duì)象上
            3.其他事件，將事件添加到ajax中的事件


            添加事件的三種方式
            1.DOM0級(jí)事件，在標(biāo)簽元素上直接添加事件
            2.DOM1級(jí)事件，為某個(gè)元素對(duì)象添加事件
            3.DOM2級(jí)事件，為某個(gè)元素對(duì)象添加事件
                    參數(shù)1：事件名稱(chēng)，例如click，mouseover
                    參數(shù)2：事件的方法，例如匿名函數(shù)/有名函數(shù)
                    參數(shù)3：事件流，有兩個(gè)值，分別是true和false，
        */ 

        var page=document.getElementById('page');

        // DOM2級(jí)事件，IE9以下版本不支持

        // 添加事件監(jiān)聽(tīng)者  注意:第一個(gè)一定是字符串而且沒(méi)有on
        // page.addEventListener("click",function(){
        //  alert(this.innerHTML);
        // },false);

        // page.addEventListener("click",function(){
        //  this.innerHTML="DOM4";
        // },false);

        // //移出事件監(jiān)聽(tīng)者 注意:事件不會(huì)被移出，因?yàn)閰?shù)2不一致
        // page.removeEventListener("click",function(){
        //  // 匿名函數(shù)雖然長(zhǎng)的一樣，但本質(zhì)上是有區(qū)別的，所以不能這樣移出
        //  alert(this.id);
        // },false);

        // 綁定有名函數(shù)事件
        // var handler=function(){
        //  alert(this.id);
        // }
        // DOM1&DOM2的區(qū)別 前者只能添加一個(gè)方法，而后者可以添加多個(gè)
        // var handler2=function(){
        //  alert(this.innerHTML);
        // }
        // 添加事件
        // page.addEventListener("click",handler,false);
        // page.addEventListener("mouseover",handler2,false);


        // 移出事件
        // page.removeEventListener("click",handler,false);
        // page.removeEventListener("mouseover",handler2,false);
        /*
            DOM2級(jí)事件方法：可以為某個(gè)對(duì)象添加不同的事件名稱(chēng)以及不同的方法
        */ 

        /*
            事件流===>事件冒泡/事件捕獲
            1.IE認(rèn)為事件觸發(fā)是由最具體的元素，逐層向外到不具體元素，則稱(chēng)為事件冒泡
            2.Netscape網(wǎng)景認(rèn)為事件觸發(fā)是由最外層(最不具體的元素)逐層向內(nèi)層最具體的元素，則稱(chēng)為事件捕獲

            true代表事件捕獲
            false代表事件冒泡
            為了最大限度的兼容各大瀏覽器，多數(shù)情況下使用的都是事件冒泡
            非特殊情況，不建議使用事件捕獲，所以監(jiān)聽(tīng)者的第三個(gè)參數(shù)始終是false。
        */ 

        // IE事件添加 有兩個(gè)參數(shù) 事件名稱(chēng)(有 on)和事件方法
        // page.attachEvent("onclick",function(){
        //  alert(this.innerHTML);
        // });
        // // IE事件移出
        // apge.detachEvent("onclick",function(){
        //  alert(this.id);
        // });

        /*
            注意:在IE中使用attachEvent(),事件處理會(huì)在全局作用域中執(zhí)行,所以this將會(huì)指向window.

            IE中事件的執(zhí)行順序,在正常瀏覽器中的執(zhí)行順序是先添加先執(zhí)行,IE則是相反.

            IE移出事件和標(biāo)準(zhǔn)瀏覽器的移出方式一樣方法不一樣
            IE移出事件使用datachEvent();參數(shù)要和添加的參數(shù)一致;
        */ 


        // 跨瀏覽器事件的處理方法(兼容寫(xiě)法)
        var eventUtil={
            addHandler:function(element,type,handler){
                // 判斷監(jiān)聽(tīng)方法
                if (element.addEventListener) {
                    // 標(biāo)準(zhǔn)瀏覽器
                    element.addEventListener(type,handler,false);
                }else if (element.attachEvent) {
                    // IE瀏覽器
                    element.attachEvent("on"+type,handler);
                }else{
                    // 其他情況
                    element["on"+type]=handler;
                }
            },

            removeHandler=function(element,type,handler){
                if (element.removeEventListenere) {
                    // 標(biāo)準(zhǔn)瀏覽器
                    element.removeEventListener(type,handler,false);
                }else if (element.detachEvent) {
                    // IE瀏覽器
                    element.detachEvent("on"+type,handler);
                }else{
                    // 其他情況
                    element["on"+type]=null;
                }
            }

        };


        var handler=function(){
            alert(this.innerHTML);
        }
        // 添加事件
        eventUtil.addHandler(page,"click",handler);
        eventUtil.removeHandler(page,"click",handler);
    </script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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