跨浏览器事件处理

浅浅的花香味﹌ 2022-01-29 06:11 188阅读 0赞

# **事件处理程序** #

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

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

click的事件处理程序：onclick

**目录**

事件处理程序

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理

4.IE事件处理

跨浏览器的事件处理

性能优化

事件对象

IE中的事件对象 window.event

DOM中事件对象 event

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

--------------------

下面每个的介绍一下：

*  ### 1.HTML事件处理程序 ###

优点：简单

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

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("事件对象");
      }