写在前面的话:就我目前的水平来看,这两种方法不能一起使用,用on添加的事件removeEventListener()没办法删除,反之一样
注册事件的两种方式:
-
on+事件名称
-
addEventListener()事件监听器
- 假设事件源是获取到的button节点的btn,为btn注册一个点击事件: btn.addEventListener("click",fn); //第一个参数是事件名称,没有on,第二个是执行的函数体
- 这种方法可以为一个节点注册多个事件 如上边的btn:
btn.addEventListener("click",fn1); btn.addEventListener("click",fn2); - 在IE9前,用attachEvent()这个方法
- 因为在DOM2之后出来,所以需要考虑到兼容性的问题
<body> <input type="button" value="一个神奇的按键"> <script> var inp = document.getElementsByTagName('input')[0]; //事件的兼容性写法 EventListener = { addEvent : function (ele,fn,str) { if (ele.addEventListener) { ele.addEventListener(str,fn); }else if (ele.attachEvent) { //兼容IE678 ele.attachEvent("on" + str,fn); }else { //DOM0时代,但当前的这种写法只是示例,不够完善 ele["on" + str] = fn; } }, removeEvent : function (ele,fn,str) { if (ele.removeEventListener) { ele.removeEventListener(str,fn); }else if (ele.detachEvent) { ele.detachEvent("on" + str, fn); }else { ele["on" + str] = fn; } } } function fn() { alert(1); } var inp = document.getElementsByTagName('input')[0]; EventListener.addEvent(inp,fn,"click");//添加事件 EventListener.removeEvent(inp,fn,"click");//移除事件 </script>