浏览器事件模式

浏览器的事件模型

浏览器的事件模型过程可分为三个阶段：捕获-目标-冒泡 我们通常用addEventListener()函数进行事件的监听 监听事件的捕获或者冒泡。

addEventListenter

addEventLister()函数有三个参数1.监听的事件名称，2.事件处理函数，3冒泡或者捕获 true表示捕获 false则表示冒泡， 默认情况下是进行的冒泡。回调函数中的参数是事件对象event,event中的target则是 触发的对象对象，currentTarget则是绑定事件的元素对象

e.stopPropagation

e.stopPropagation指的是阻止事件传播，无论事件是出入冒泡阶段还是处于捕获阶段。

e.preventDefault

e.preventDefault()阻止默认行为（a链接的跳转，表单的提交等）

兼容性问题

addEventListener 有chrome firfox Ie高版本 safari和opera 支持 attchEvent 有低版本的浏览器支持

//事件监听封装
class DomEvent {
    constructor(element) {
        //监听的事件dom
        this.element = element
    }
    //添加事件监听的方法
    addEvent(type, fn, bol = false) {
        if (this.element.addEventListener) {
            this.element.addEventListener(type, fn, bol)
        } else if (this.element.attchEvent) {
            this.element.attchEvent(`on${type}`, function () {
                fn.call(this.element)
            })
        } else {
            this.element['on' + type] = fn
        }
    }
    //取消事件监听的方法
    removeEvent(type, fn, bol) {
        if (this.element.removeEventListener) {
            this.element.addEventListener(type, fn, bol)
        } else if (this.element.attchEvent) {
            this.element.detachEvent(`on${type}`, fn)
        } else {
            this.element['on' + type] = null
        }
    }
    
}
//阻止事件传播 主要是针对于冒泡  ie不支持捕获
function stop(e) {
    if(e.stopPropagation){
        e.stopPropagation()
    }else{
        //ie
        e.cancelBubble=true
    }
    
}
//阻止默认行为
function  defaultEvent(e) {
    if(e.preventDefault){
        e.preventDefault()
    }else{
        //ie
        e.returnValue = false; 
    }
    
}