解决浏览器事件绑定兼容性问题

这里主要是针对DOM2级事件，对于HTML事件和DOM0级事件在非IE和IE下都能得到支持，因此这里只实现对DOM2级事件的兼容性处理和封装

思路：

1. 绑定事件：如果能使用addEventListener方法绑定的，就采用本方法；否则采用attachEvent方法
2. 解绑事件：如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑；否则就采用detachEvent方法解绑

伪代码：

function addEvent(ele){
            if(如果为非IE){
                就执行addEventListener
            }else{
                执行attachEvent
            }
        }
addEvent();

下面就直接看代码吧

<div style="width: 200px;height: 200px;background-color: pink"></div>

        var div = document.querySelector('div');

        //采用封装，封装成一个对象
        //调用的时候直接 对象.key即可
        var superEvent = {
            // ele--哪个元素调用该事件
            // type--调用事件的类型(click、mousemove...)
            // func--函数


            // 添加事件
            add: function(ele, type, func) {
                //如果在非IE环境下
                if (ele.addEventListener) {
                    ele.addEventListener(type, func);
                } else { //在IE环境下
                    ele.attachEvent('on' + type, func);
                }
            },

            //移除事件
            remove: function(ele, type, func) {
                //如果在非IE环境下
                if (ele.removeEventListener) {
                    ele.removeEventListener(type, func);
                } else {
                    //在IE环境下
                    ele.detachEvent('on' + type, func);
                }
            }
        }

        function show() {
            console.log("这是一个div执行函数");
        }
        superEvent.add(div, 'click', show);
        // superEvent.remove(div, 'click', show);

非IE：

 

IE下：