javascript 事件处理程序介绍

1、DOM0级事件处理程序

  将一个函数值给一个事件处理程序属性。

  例如:

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  btn.onclick = funtion(){

  alert(this.id); //"myBtn"

  }

  删除事件,btn.onclick = null;

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

  2、DOM2级事件处理程序

  先介绍,“DOM2级事件”定义的两个方法,用于处理指定和删除事件处理程序的操作:

  addEventListener()

  removeEventListener()

  所有DOM节点都包含这两个方法,接受3个参数:处理事件名、作为事件处理程序的函数、一个布尔值。

  最后的布尔值参数,true:表示在捕获阶段调用事件处理程序;false:表示在冒泡阶段调用事件处理程序。\

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  btn.addEventListener("click",funciton(){

  alert(this.id);

  },false);

  用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。

  例如:

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  btn.addEventListener("click",funciton(){

  alert(this.id);

  },false);

  btn.addEventListener("click",funciton(){

  alert(“Hello World!”);

  },false);

  这两个事件会按照顺序触发。

  通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致,也就是说匿名函数将无法移除。

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  var handler = function(){

  alert(this.id);

  };

  btn.addEventListener("click" , handler , false);

  btn.removeEventListener("click", handler , false);

  大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以便兼容各种浏览器。

  firefox、safari、chrome、opera支持DOM2级事件处理程序。

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

  3、IE事件处理程序

  IE实现了与DOM中类似的两个方法:

  attachEvent()

  detachEvent()

  这两个方法都接受两个参数:事件处理程序名称和事件处理程序函数。

  由于IE只支持时间冒泡,所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。

  例如:

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  btn.attachEvent("onclick" , function(){

  alert("Clicked");

  })

  注意,attachEvent()的第一个参数是“onclick”,而非 “click”。

  IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。

  DOM0级方法,事件处理程序会在所属元素的作用域内运行;

  attachEvent()方法,事件处理程序会在全局作用域中运行,因此 this等于 window。

  attachEvent()也可以为一个元素添加多个事件处理程序。

  

复制代码 代码如下:

  var btn = document.getElementById("myBtn");

  btn.attachEvent(”onclick“ , function(){

  alert("clicked");

  })

  btn.attachEvent(”onclick“ , function(){

  alert("Hello World!");

  })

  与DOM方法不同的是,这些事件处理程序不是以添加顺序执行,而是以相反的方向执行。

  detachEvent() 的用法与removeEventListener()的用法一样。

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

  4、跨浏览器的事件处理程序

  

复制代码 代码如下:

  var EventUtil = {

  addHandler : function(element, type , handler){

  if (element.addEventListener){

  element.addEventListener(type, handler, false);

  } else if ( element.attachEvent){

  element.attachEvent("on" + type , handler)

  } else {

  element["on" + type] = handler;

  }

  },

  removeHandler: function( element , type , handler){

  if ( element.removeElementListener) {

  element.removeElementListener( type , handler , flase);

  } else if ( element.detachEvent) {

  element.detachEvent ( "on" + type , handler)

  } else {

  element["on" + type] = handler;

  }

  }

  }