通过原生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”使用来取消监听。