Event 事件模型

事件流

 <div id="app">
        <p id="dom">Click</p>
    </div>

• 事件冒泡: p -> div -> body -> HTML -> document
• 时间捕获: document -> HTMl -> body -> div -> p

事件处理程序

     DOM2 事件处理程序
     el.addEventListener(event, function, useCapture)
     el.removeEventListener(event, function, useCapture)
     //useCapture : true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事 件处理程序
     
     阻止默认事件传播
     event.preventDefault()
     
     阻止事件的传播
     event.stopPropagation();

    IE 事件处理程序     
    el.attachEvent(event, function)
    el.detachEvent(event, function)
    //attachEvent()添加的事件处理程序会添加到冒泡阶段。
    
    阻止默认事件传播
    window.event.returnValue = false
    阻止事件的传播
    window.event.returnValue = true;

手写事件绑定

attachEvent & addEventListener 区别

• a. 传参 attachEvent对于事件名加上'on'
• b. 执行顺序，attachEvent - 后绑定先执行；addEventListener - 先绑定先执行
• c. 解绑 detachEvent vs removeEventListener
• d. 阻断 e.cancelBubble = true vs e.stopPropagation()
• e. 默认事件打断 e.returnValue vs e.preventDefault

class bindEvent {
        constructor(element) {
            this.element = element;
        }

        addEventListener = (type, handler) => {
            if (this.element.addEventListener) {
                this.element.addEventListener(type, handler, false);
            } else if (this.element.attachEvent) {
                const element = this.element;
                this.element.attachEvent('on' + type, () => {
                    handler.call(element);
                });
            } else {
                this.element['on' + type] = handler;
            }
        }

        removeEventListener = (type, handler) => {
            if (this.element.removeEventListener) {
                this.element.removeEventListener(type, handler, false);
            } else if (this.element.detachEvent) {
                const element = this.element;
                this.element.detachEvent('on' + type, handler);
            } else {
                this.element['on' + type] = null;
            }
        }

        static stopPropagation(e) {
            if(e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }

        static preventDefault(e) {
            if(e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = true;
            }
        }
    }