js事件監聽

時間 2019-11-20

原文原文鏈接

/*
事件監聽器html

addEventListener()
removeEventListener()
node

傳統事件綁定：
一、重複添加會，後添加的後覆蓋前面的。
*/瀏覽器

示例代碼中的html結構：函數

<body>    
    <button id = "btn1">按鈕</button>
</body>

//代碼示例spa

            window.onload = function(){
                //傳統事件綁定
                var oBtn = document.getElementById('btn1');
                oBtn.onclick = function(){
                    alert('hello world');
                }

                //此處省略100行代碼
                
                oBtn.onclick = function(){
                    alert('world hello');
                }
            }

/*上面的結果是下面的oBtn.onclick事件會覆蓋到上面的oBtn.onclick事件
最後頁面上輸出的結果也是 world hello;*/code

//怎麼才能讓他兩個事件都存在呢？這裏咱們要用到事件監聽器
//addEventListener()
//removeEventListener()
/*
事件監聽器htm

addEventListener()
格式：
node.addEventListener(事件類型, 函數_要執行的匿名函數, false)
第三參數：false 事件冒泡 true 事件捕獲對象

removeEventListener()
格式：
node.removeEventListener(事件類型, 函數名);
blog

傳統事件綁定：
一、重複添加會，後添加的後覆蓋前面的。
*/

//代碼示例：事件

        
            window.onload = function(){
                //事件監聽綁定
                var oBtn = document.getElementById('btn1');
                oBtn.addEventListener ('click', function(){
                    alert('hello world');                    
                }, false)
                

                //此處省略100行代碼
                //再添加一個監聽事件用來監聽click 點擊
                oBtn.addEventListener ('click', function(){
                    alert('world hello');
                    
                }, false)
            }

//這樣就不會發生重疊現象，點擊按鈕時會彈出 hello world 和 world hello；

//我再來看一下移除事件監聽 removeEventListener,首先先看一下傳統的移除事件

//咱們修改html結構以下

<body>    
    <button>添加事件</button>
    <button>按鈕</button>
    <button>刪除事件</button>
</body>

//具體演示代碼以下

            window.onload = function(){
                //獲取3個button按鈕元素節點
                var aBtns = document.getElementsByTagName('button');
                //給第二個按鈕添加一個傳統的點擊事件
                aBtns[1].onclick = function(){
                    alert('原有的事件');
                }
                //當點擊第一個按鈕的時候再給第二個按鈕添加一個傳統的點擊事件
                aBtns[0].onclick = function(){
                    aBtns[1].onclick = show;
                }
                //點擊第三個按鈕的時候，將第二按鈕點擊事件賦值成 null  即爲空
                aBtns[2].onclick = function(){
                    aBtns[1].onclick = null;
                }
                
                //方便演示的函數
                function show(){
                    alert('hello world');
                }                
                            
                
            }

//在演示過程當中，咱們能夠看出每次都是相互覆蓋的關係，剛開始的時候點擊第二個按鈕會彈出原有的事件，咱們再去點一下第一個按鈕後
//再回來點第二個按鈕這時的內容就變成了 hello world 說明第二次添加的事件把原有的事件就覆蓋了，點擊第三個按鈕也是一樣的道理
//所在再次點擊第二個時就什麼也不彈出來。

//咱們再來看一下移除事件監聽 removeEventListener與上面的區別，

//代碼以下

            window.onload = function(){
                var aBtns = document.getElementsByTagName('button');

                aBtns[1].addEventListener('click', function(){
                    alert('原有的事件');
                }, false);

                aBtns[0].onclick = function(){
                    aBtns[1].addEventListener('click', show, false);
                }

                aBtns[2].onclick = function(){
                    aBtns[1].removeEventListener("click", show);
                }
            }

            function show(){
                alert('hello world');
            }

//能夠看出用事件監聽的方法能夠不覆蓋原有的事件，還能自由可控制，移除添加的事件。

/*可是這種方法是ie9 之後纔出來的，因此ie9之前不兼容，可是他給咱們了兩個功能同樣的函數，

IE下
attachEvent()
格式
只有兩個參數
attachEvent(on事件類型, 函數_要執行的匿名函數或函數)
detachEvent(on事件類型, 函數_要取消的匿名函數或函數)*/

/*因此咱們封裝兼容全部瀏覽器的監聽事件方法（函數）*/

        /*---------封裝兼容全部瀏覽器的 監聽事件方法（函數--------------*/
            //封裝添加監聽事件的函數 
            //    形參說明
            //    obj  是要添加的元素節點對象   
            //    event 是事件類型（是click仍是mousedown等）
            // func  是事件觸發後要執行的函數
            function addEvent(obj, eventType, func){
                if(obj.addEventListener){
                    obj.addEventListener(eventType, func, false);
                }else{
                    obj.attachEvent("on" + eventType, func);
                }
            }
            //封裝移除監聽事件的函數
            function removeEvent(obj, eventType, func){
                if(obj.removeEventListener){
                    obj.removeEventListener(eventType, func);
                }else{
                    obj.detachEvent("on" + eventType, func);
                }
            }        
        
        /*---------封裝兼容全部瀏覽器的 監聽事件方法（函數)end--------------*/

/*總結
傳統事件綁定能夠知足咱們對於事件綁定的大部分需求。

事件監聽器能夠補充咱們傳統事件綁定不能知足的更高的要求。

相關標籤/搜索

每日一句

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