IT虾米网

js封装html事件绑定通用类

developer 2022年05月13日 编程语言 162 0

因为浏览器中有些品牌及型号有特殊的存在,有些方法不支持,这种事情就很让人头疼。比如在测试的时候,在谷歌浏览器好使,在IE下就不好使
caniuse网站中就能查到api在浏览器支持情况

addEventListener在IE6-8中就不支持

stopPropagation在IE6-8中也不支持

preventDefault有些浏览器支持情况还存在疑问
这种情况下有必要封装一个通用类及公共方法来支持此类事件。addEventListenerremoveEventListener需要单独封装成一个类,实现比较简单,就是对该元素是否存在方法进行判断,如果存在就挂载,实在没有就手动挂载一个方法

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 = false; // IE 
  } 
} 

评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

【算法】哈希表