跨浏览器事件处理与优化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27855219/article/details/90402885

本文探讨了事件处理程序的概念，包括HTML事件处理程序、DOM0级和DOM2级事件处理，以及IE事件处理。强调了跨浏览器兼容性和性能优化，如通过预检测实现兼容性函数，以及事件对象在不同浏览器中的差异，如`window.event`和`event`对象的使用。还介绍了如何编写完整的跨浏览器事件处理程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件处理程序

事件就是用户或者浏览器要进行的某些动作，例如click、mouseover、load等。

事件处理程序就是响应某个事件（动作）的函数。

click的事件处理程序：onclick

IE中的事件对象 window.event

DOM中事件对象 event

完整的跨浏览器事件处理程序

下面每个的介绍一下：

1.HTML事件处理程序

优点：简单

缺点：（1）时差问题，用户可能会在HTML元素一出现就触发相应的事件，但事件处理程序可能不太满足；（2）扩展的作用域在不同的浏览器有不同的呈现效果；（3）HTML代码和Javasript代码存在紧耦合，修改时需要两个文件都改。

<input type="button" name="" value="Click me" onclick="showMessage()">

function showMessage(){
alert('HTML事件处理');
}

函数showMessage()既可以访问函数内部的变量，还可以访问元素本身的成员。

如果当前元素为表单，还可以访问到表单元素的入口，即可以访问其他表单的字段

2.DOM0级事件处理程序

优点：简单、跨浏览器

//DOM0级事件处理程序:将事件处理属性的值设置为函数
  var btndiv = document.getElementById('myBtn');
  btndiv.onclick = function(){
    btndiv.appendChild(document.createTextNode('DOM0事件处理'));
  }
  btndiv.onclick = null;

3.DOM2级事件处理

优点：可以同时指定多个事件处理程序

缺点：IE8及以下不可以

使用范围：IE9、Firefox、Safari、Chrome、Opera

注意：/要删除addEventListener添加的事件处理程序，必须使用removeEventListener，三个参数必须相同
处理函数为匿名函数不可以，因为两个匿名函数是完全不同的。

//DOM2级事件处理程序：addEventListener
  var btndivD2 = document.getElementById('myBtn');
  btndivD2.addEventListener('click',function(){
    alert(this.id);
  },false);//false 冒泡阶段
  btndivD2.addEventListener('click',function(){
    btndivD2.appendChild(document.createTextNode('DOM2事件处理'));
  },false);//冒泡阶段
  //DOM2级事件处理程序：removeEventListener
  var btndivD2 = document.getElementById('myBtn');
  var handle = function(){
    btndivD2.appendChild(document.createTextNode('DOM2事件处理remove'));
  };
  btndivD2.addEventListener('click',handle,false);
  btndivD2.removeEventListener('click',handle,false);

4.IE事件处理

支持IE、Opera

添加到事件冒泡阶段

 element.attachEvent(onclick,handler,false);

删除事件处理

 element.detachEvent(onclick,handler,false);

跨浏览器的事件处理

  //跨浏览器事件处理
  var EventUtil = {
    addHandler:function(element,type,handler){
      if(element.addEventListener){//DOM2事件处理
        element.addEventListener(type,handler,false);
      }else if (element.attachEvent){//IE
        element.attachEvent('on'+type,handler,false);
      }else{
        element['on'+type] = handler;   //DOM0事件处理
      }
    },
    removeHandler:function(element,type,handler){
      if(element.removeEventListener){
        element.removeEventListener(type,handler,false);
      }else if (element.detachEvent){
        element.detachEvent('on'+type,handler,false);
      }else{
        element['on'+type] = null;
      }
    }
  }
  var btnutil = document.getElementById('myBtn');
  var handler = function(){
    alert('clicked');
  };
  EventUtil.addHandler(btnutil,"click",handler);
  //别的处理过程
  EventUtil.removeHandler(btnutil,"click",handler);

性能优化

还有个是在文档加载就判断，而不用每次使用时判断。

对于上面的函数我们是运用"运行时"监测的.也就是每次绑定事件都需要进行分支监测.我们可以将其改为"运行前"就确定兼容函数.而不需要每次监测.。

这样我们就需要用一个DOM元素提前进行探测. 这里我们选用了document.documentElement. 为什么不用document.body呢? 因为document.documentElement在document没有ready的时候就已经存在. 而document.body没ready前是不存在的.

优化方法就是将上面的element直接指定为document.documentElement即可

事件对象

event

IE中的事件对象 window.event

属性/方法：

cancelBubble true 取消事件冒泡

returnValue false 取消事件的默认行为

srcElement 事件的目标

type 被触发的事件类型

DOM中事件对象 event

属性/方法：

stopPropagation() 取消事件冒泡

stopImmediatePropagation() 取消事件冒泡且阻止任何事件处理程序被调用

preventDefault() 取消默认事件

target 事件目标

type 被触发的事件类型

eventPhase 调用事件的阶段：1 捕获 2目标阶段 3 事件冒泡

加上事件对象后的跨浏览器事件处理程序：

完整的跨浏览器事件处理程序

  //跨浏览器事件处理
  var EventUtil = {
    getEvent:function(event){
      return event ? event : window.event;
    },
    getTarget:function(event){
      return event.target ||event.srcElement;
    },
    preventDefault:function(event){
      if(event.preventDefault){
        event.preventDefault();
      }else{
        event.returnValue = false;
      }
    },
    addHandler:function(element,type,handler){
      if(element.addEventListener){//DOM2事件处理
        element.addEventListener(type,handler,false);
      }else if (element.attachEvent){//IE
        element.attachEvent('on'+type,handler,false);
      }else{
        element['on'+type] = handler;   //DOM0事件处理
      }
    },
    removeHandler:function(element,type,handler){
      if(element.removeEventListener){
        element.removeEventListener(type,handler,false);
      }else if (element.detachEvent){
        element.detachEvent('on'+type,handler,false);
      }else{
        element['on'+type] = null;
      }
    },
    stopPropagation:function(event){
      if(event.stopPropagation){
        event.stopPropagation();
      }else{
        event.cancelBubble = true;
      }
    },
  }
  var btnutil = document.getElementById('myevent');
  btnutil.onclick = function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
    EventUtil.stopPropagation(event);
    // alert(EventUtil.getTarget(event));
  }
  document.body.onclick = function(event){
    alert("事件对象");
  }