实现一个浏览器兼容的绑定事件

知识要点

• addEventListener 和 attachEvent 区别
• 封装一个兼容多浏览器的通用绑定事件

补充知识点

• 通常我们通过 addEventListener 和 removeEventListener 绑定和删除事件

  他们接收三个参数：

1. 事件类型
2. 事件处理方法
3. 布尔参数，默认为 false（true 代表事件捕获阶段调用，false代表事件冒泡阶段调用）

• 但是在IE7，IE8中不支持 addEventListener 和 removeEventListener，我们可以通过 attachEvent 和 detachEvent 来实现

  他们分别接受两个参数

1. 事件类型
2. 事件处理方法

注意：IE不支持事件捕获

代码实现

    class BomEvent {
        constructor(element) {
            this.element = element;
        }
        // 绑定事件
        addEvent(type, handler) {
            if(this.element.addEventListener) {
                this.element.addEventListener(type, handler, false);
            } else if(this.element.attachEvent) {
                // 注意需加上on
                this.element.attachEvent('on' + type, function() {
                    handler.call(this.element);
                })
            } else {
                this.element['on' + type] = handler
            }
        }
        // 移除事件
        removeEvent(type, handler) {
            if(this.element.removeEnentListener) {
                this.element.removeEnentListener(type, handler, false);
            } else if(this.element.detachEvent) {
                this.element.detachEvent('on' + type, handler);
            } else {
                this.element['on' + type] = null;
            }
        }
    }
    
    // 阻止事件 （主要是事件冒泡，IE不支持事件捕获）
    function stopPropagation(ev) {
        if(ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    }
    
    // 取消事件默认行为
    function preventDefault(ev) {
        if(ev.preventDefault) {
            ev.preventDefault();
        } else {
            ev.returnValue = false;
        }
    }