JS-事件心得-优快云博客

本文介绍了在不同浏览器中实现事件监听的两种主要方法：addEventListener() 和 attachEvent()，并提供了兼容性解决方案，确保代码能够在IE9及以前版本的浏览器中正常运行。

写在前面的话:就我目前的水平来看,这两种方法不能一起使用,用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>