11、写一个兼容的事件模型

90 阅读1分钟

兼容点:谷歌浏览器、IE 浏览器

使用方式:

// 绑定事件:
eventModel.addEventListener(ele, 'click', fn, boolean)

// 解绑事件:
eventModel.removeEventListener(ele, 'click', fn)

// 阻止传播:
eventModel.stopPropagation()

// 阻止默认事件:
eventModel. preventDefault()

代码实现:就是在里面写不同浏览器支持的 API 而已

const eventModel = {
  // 绑定事件:
  addEventListener(ele, eventName, fn, flag) {
    if(ele.addEventListener) {
      // 非 IE 浏览器
      ele.addEventListener(eventName, fn, flag)
    } else if(ele.addtachEvent) {
      // IE 浏览器
      ele.addtachEvent(`on${eventName}`, fn)
    } else {
      // 兜底
      ele[`on${eventName}`] = fn
    }
  },
  
  // 解绑事件:
  removeEventListener(ele, eventName, fn) {
    if(ele.removeEventListener) {
      // 非 IE 浏览器
      ele.removeEventListener(eventName, fn)
    } else if(ele.detachEvent) {
      // IE 浏览器
      ele.addtachEvent(`on${eventName}`, fn)
    } else {
      // 兜底
      ele[`on${eventName}`] = null
    }
  },
  
  // 阻止传播:
  stopPropagation(event) {
    if(event.stopPropagation) {
      // 非 IE 浏览器
      event.stopProgamation()
    } else {
    	// IE 浏览器
      ele.cancelBubble = true
    }
  }
  
  // 阻止默认:
   preventDefault(event) {
    if(event.preventDefault) {
      // 非 IE 浏览器
      event.preventDefault()
    } else {
      // IE 浏览器
      ele.returnValue = false
    }
  }
}