在网页开发中经常会有交互操作,比如点击一个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){}
//其他事件的回调函数...
};
区别说明:
方式1和方式2是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:
用 “addeventlistener” 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 “onclick” 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
原创文章,作者:guozi,如若转载,请注明出处:https://www.sudun.com/ask/89173.html