通過原生js對DOM事件的綁定的幾種方式總匯

在網頁開發中經常會有交互操作，比如點擊一個dom元素，需要讓js對該操作做出相應的響應，這就需要對Dom元素進行事件綁定來進行處理，js通常有三種常用的方法進行事件綁定：在DOM元素中直接綁定；在JavaScript代碼中綁定；綁定事件監聽函數。

 

直接在DOM元素綁定事件

<div id="btn" onclick="clickone()"></div> //直接在DOM里綁定事件
<script>
　　　　function clickone(){ alert("hello"); }
</script>

 

 

在JavaScript代碼中綁定  

<div id="btn"></div>
<script>
　　document.getElementById("btn").onclick = function（）{ alert("hello"); } //腳本里面綁定
</script>

 

 

綁定事件監聽函數

<div id="btn"></div>
<script>
　document.getElementById("btn").addeventlistener("click",clickone,false); //通過偵聽事件處理相應的函數，

 

//第三個參數設置為true就在捕獲過程中執行，反之就在冒泡過程中執行處理函數。

function clickone(){ alert("hello"); }
</script>

 

IE下使用attachEvent/detachEvent：addEventListener 只支持到 IE 9，所以為了兼容性考慮，在兼容 IE 8 以及以下瀏覽器可以用 attachEvent 函數，和 addEventListener 函數表現一樣，除了它綁定函數的 this 會指向全局這個缺點以外，使用為了考慮兼容性，我們在使用前，可以添加下面這段代碼（下面使用采用惰性加載的方法）：

 var addListener = null,
        removeListener = null;
    if (typeof window.addEventListener === 'function') {
        addListener = function(el, type, fn) {
            el.addEventListener(type, fn, false);
        };
        removeListener = function(el, type, fn) {
            el.removeEventListener(type, fn, false);
        };
    } else if (typeof doc.attachEvent === 'function') {  //'IE'
        addListener = function(el, type, fn) {
            el.attachEvent('on'+type, fn);
        };
        removeListener = function(el, type, fn) {
            el.detachEvent('on'+type, fn);
        };
    } else {
        addListener = function(el, type, fn) {
            el['on'+type] = fn;
        };
        removeListener = function(el, type, fn) {
            el['on'+type] = null;
        };
    }

 

最后，進行事件綁定時可以這么寫: 

addListener(dom, "click", EventHandler.confirmBtnClickEvent);
var EventHandler = {
       confirmBtnClickEvent: function(e){}
       //其他事件的回調函數...
};

辦公資源網址導航 https://www.wode007.com

 

區別說明：

方式1和方式2是我們經常用到的，那么既然已經有兩種綁定事件的方法為什么還要有第三種呢？答案是這樣的：

用 "addeventlistener" 可以綁定多次同一個事件，且都會執行，而在DOM結構如果綁定兩個 "onclick" 事件，只會執行第一個；在腳本通過匿名函數的方式綁定的只會執行最后一個事件。

方式3注冊了事件監聽，還可以通過“removeListener”使用來取消監聽。