【js封装html事件绑定通用类】因为浏览器中有些品牌及型号有特殊的存在，有些方法不支持，这种事情就很让人头疼。比如在测试的时候，在谷歌浏览器好使，在IE下就不好使
caniuse网站中就能查到api在浏览器支持情况
文章图片
addEventListener在IE6-8中就不支持
文章图片
stopPropagation在IE6-8中也不支持
文章图片
preventDefault有些浏览器支持情况还存在疑问
这种情况下有必要封装一个通用类及公共方法来支持此类事件。addEventListener和removeEventListener需要单独封装成一个类，实现比较简单，就是对该元素是否存在方法进行判断，如果存在就挂载，实在没有就手动挂载一个方法
class BomEvent {
constructor(element) {
this.element = element;
}addEvent(type, handle) {
if (this.element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
this.element.addEventListener(type, handle, false);
} else if (this.element.attachEvent) {
this.element.attachEvent("on" + type, function () {
handle.call(element);
});
} else {
this.element["on" + type] = handle;
}
}removeEvent(type, handle) {
if (this.element.removeEventListener) {
this.element.removeEventListener(type, handle, false);
} else if (this.element.detachEvent) {
this.element.detachEvent("on" + type, handle);
} else {
this.element["on" + type] = null;
}
}
}// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
// 标准w3c
} else {
event.cancelBubble = true;
// IE
}
}// 取消事件的默认行为
function preventDefault(event) {
if (event.preventDefault) {
event.preventDefault();
// 标准w3c
} else {
event.returnValue = https://www.it610.com/article/false;
// IE
}
}
