兼容点:谷歌浏览器、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
}
}
}