奔跑的瓜牛
奔跑的瓜牛

JS事件及其兼容用法

　　JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

 

　　1、事件流：描述的是从页面中接收事件的顺序。

　　IE提出的事件冒泡流：事件开始由最具体的元素接收，然后向上传播到较为不具体的节点。

　　Nerscape提出的事件捕获流：由最不具体的元素逐渐传播到最具体的节点。

　　DOM2级事件规定了事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

 

　　2、事件处理程序：响应事件的函数。名字一般以“on”开头，如onclick、onload、onmouseover... 添加事件处理程序有3种方法：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序.

　　

　　HTML事件处理程序：某个元素支持某种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。

例如：  ,由于这个值是JavaScript，因此不能在其中使用未转义的HTML语法字符，例如&、“”、<、>。若要使用引号，可以这么来用：  

　　

　　DOM0级事件处理程序：将一个函数赋值给一个事件处理程序。例如：

1 var btn = document.getElementById("myBtn");
2 btn.onclick = function(){
3     alert("Click");
4 };

同时，也可以删除DOM0级方法指定的事件处理程序，只要设置为null即可： btn.onclick = null; //删除DOM0级事件处理程序 

　　

　　DOM2级事件处理程序：“DOM2级事件”定义了俩个 方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()，接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值如果为true，表示在捕获阶段调用事件处理函数；如果是false(默认)，在冒泡阶段调用。同时，IE有自己“独特”的事件处理程序去替代这俩个方法：attachEvent()和detachEvent().这样一来，我们就得苦逼的想着如何兼容俩者了，常用的做法如下：

 1 var eventUtil={ //type事件不加on！
 2            //添加句柄
 3           addHandle:function (element,type,handler){
 4                  if(element.addEventListener){
 5                       element.addEventListener(type,handler,false);
 6                  }else if(element.attachEvent){
 7                       element.attachEvent("on"+type,handler);
 8                  }else{
 9                       element["on"+type].handler;
10                  }
11            }
12             //删除句柄---匿名函数不能被移除
13           removeHandle:function (element,type,handler){
14                  if(element.removeEventListener){
15                       element.removeEventListener(type,handler,false);
16                  }else if(element.detachEvent){
17                       element.detachEvent("on"+type,handler);
18                  }else{
19                       element["on"+type]=null;
20                  } 
21           }
22 }     
23 
24 eventUtil.addHandle(oBtn,'click',show);    //调用方法

 

　　3、事件对象：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

事件对象的获取和属性方面，IE有显得那么“特殊”。因此，我们处处要想着兼容它。有关事件对象和对象属性，常用的兼容方法如下：

 1 var eventUtil={   
 2             //获取事件对象
 3            getEvent : function (event){
 4                         return event ? event : window.event;
 5            }
 6            //获取事件目标     
 7            getElement : function(event){  //传入获取到的事件对象 
 8                  return event.target || event.srcElement;
 9            }
10              //阻止事件冒泡
11            stopPropagation:function(event){   //传入获取到的事件对象 
12                   if(event.stopPropagation){
13                         event.stopPropagation;
14                   }else{
15                          event.cancelBubble=true;
16                   }
17             }
18              //阻止默认行为
19             preventDefault:function(event){   //传入获取到的事件对象 
20                  if(event.preventDefault){
21                         event.preventDefault;
22                  }else{
23                         event.returnValue=false;
24                  } 
25            }
26 }

具体用法： 

 1   //获取目标对象
 2   btn.onclick = function(event) {
 3       event = EventUtil.getEvent(event);   //获取事件对象
 4       var target = EventUtil.getTarget(event);
 5   };
 6   
 7   //取消默认事件
 8   var link = document.getElementById("myLink");
 9   link.onclick = function(event) {
10      event = EventUtil.getEvent(event);  //获取事件对象
11      EventUtil.preventDefault(event);
12  }
13  
14    //取消冒泡
15  var btn = document.getElementById("myBtn");
16  btn.onclick = function(event){
17      alert("Clicked");
18      event = EventUtil.getEvent(event);
19      EventUtil.stopPropagation(event);
20  };
21  document.body.onclick = function(event){
22      alert("Body clicked");  //点击btn，这个不会弹出来
23  };
use

 

 　　4、事件类型：Web浏览器中可能发生的事情有很多类型，不同的事件类型具有不同的信息。 “DOM3级事件”规定了以下几类属性：

 UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获取或失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行操作时触发；

滚轮事件，当使用滚轮（或类似设备）时触发；

文本事件，当在文档中输入文本时触发；

键盘事件，当用户通过键盘在页面上执行操作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动（mutation）事件，当底层DOM结构发生变化时触发；

变动名称事件，当元素或属性名变动时触发。此类事件已被废弃。

 

 4.1  UI事件：指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种形式存在的，现有的UI事件如下：

load：当页面完全加载后再window上触发。

unload：当页面完全卸载后再window上触发。

error：当发生JavaScript错误时在window上面触发。

select：当用户选择文本框（或