通过原⽣js对DOM事件的绑定的⼏种⽅式总汇
在⽹页开发中经常会有交互操作，⽐如点击⼀个dom元素，需要让js对该操作做出相应的响应，这就需要对Dom元素进⾏事件绑定来进⾏处理，js通常有三种常⽤的⽅法进⾏事件绑定：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。
直接在DOM元素绑定事件
1 <div id="btn" onclick="clickone()"></div> //直接在DOM⾥绑定事件
2 <script>
3    function clickone(){ alert("hello"); }
4 </script>
在JavaScript代码中绑定
1 <div id="btn"></div>
2 <script>
3  ElementById("btn").onclick = function（）{ alert("hello"); } //脚本⾥⾯绑定
4 </script>
绑定事件监听函数
<div id="btn"></div>
<script>
　ElementById("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) {
};
} 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", firmBtnClickEvent);
var EventHandler = {
confirmBtnClickEvent: function(e){}
//其他事件的回调函数...
};
区别说明：原生js和js的区别
⽅式1和⽅式2是我们经常⽤到的，那么既然已经有两种绑定事件的⽅法为什么还要有第三种呢？答案是这样的：
⽤ "addeventlistener" 可以绑定多次同⼀个事件，且都会执⾏，⽽在DOM结构如果绑定两个 "onclick" 事件，只会执⾏第⼀个；在脚本通过匿名函数的⽅式绑定的只会执⾏最后⼀个事件。
⽅式3注册了事件监听，还可以通过“removeListener”使⽤来取消监听。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。