Table of Contents

1.事件处理程序

定义:响应某个事件的函数,
事件处理程序的名字以"on"开头，因此click事件的事件处理程序可以是onclick

2.HTML事件处理程序

定义：

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定
这个函数中有一个局部变量event,就是事件对象。
在函数内部,this值等于事件的目标元素

缺点:

1.存在一个时差问题：用户可能会在html元素一出现在页面上就触发相应的事件，但事件处理程序可能还不具备执行条件 ==>可以将HTML事件处理程序封装在try-catch块中来解决。

2.扩展事件处理程序的作用域链在不同浏览器中会导致不同结果（with扩充作用域链）

3.html代码与js代码紧密耦合，如果要更换事件处理程序，就要改动2处

例如要修改函数名show的话，2处都得改

<div id="box" style="width: 100px;height: 100px;background: blue;"onclick="show();"></div>
function show(){
alert(1);
}

3.DOM0级事件处理程序

又称元素的方法，在元素的作用域中运行,this引用的为当前元素，在事件流的冒泡阶段被处理

定义：

通过js指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。必须先获得操作对象的引用

<div id="box" style="width: 100px;height: 100px;background: blue;"onclick="show();"></div>
    var box=document.getElementById("box");//必须先获得操作对象的引用
    box.onclick=function(){
      alert(1);
    }

添加多个事件处理程序

添加多个事件处理程序的时候，后面的会覆盖前面的

var box=document.getElementById("box");
      box.onclick=function(){
        alert(1);
      }
      box.onclick=function(){
        alert(2);
      }
      //2

优势：

1.简单

2.具有跨浏览器优势

每个元素（包括window,document）都有自己的事件处理程序属性，且属性都为小写，将这种属性的值设置为一个函数，就可以指定事件处理程序
事件处理程序代码运行以前不会指定事件处理程序

删除DOM0级事件处理程序:

box.onclick=null;

4.DOM2级事件处理程序

DOM2级的2个方法:

1.addEventListener (),添加DOM2级事件处理程序,接收3个参数，(要处理的事件名，作为事件处理程序的函数和一个布尔值)

addEventListener的第3个参数为布尔值，若为true，则代表在捕获阶段调用事件处理程序，否则在冒泡阶段调用事件处理程序。

<button id="box" >点击</button>
   var box=document.getElementById("box");
   box.addEventListener("click",function(){
   	alert(this.id);
   },false);//在冒泡阶段被调用

2.removeEventListener,删除DOM2级事件处理程序,接收3个参数，(要处理的事件名，作为事件处理程序的函数和一个布尔值)

<button id="box" >点击</button>
   var box=document.getElementById("box");
   box.removeEventListener("click",function(){
   	alert(this.id);
   },false);//在冒泡阶段被调用

匿名函数问题

//因为这里的事件处理程序的函数为匿名函数，找不到对应的处理函数，所以无效。

可以通过函数表达来解决

box.addEventListener("click", function() {
    alert(1);
  }, false);
  box.removeEventListener("click", function() {
    alert(1);
  }, false);
//上面的事件处理程序的函数仍会执行,无效
  var handler = function() {
    alert(1);
  };
  box.addEventListener("click", handler, false);
  box.removeEventListener("click", handler, false);

注意:

通过addEventListener()添加的事件处理程序必须得用removeEventListener()来删除，且参数必须相同

添加多个事件处理程序

可以添加多个事件处理程序,添加的多个事件处理程序会按照它们添加的顺序触发(ie事件处理程序的会按相反的顺序触发)

5.ie事件处理程序

ie事件处理程序的2个方法，均接受2个参数

1.attachEvent(),添加事件处理程序,接受2个参数,(事件处理程序名称，事件处理程序函数)

由于ie8及更早版本只支持冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段

2.detachEvent(),删除事件处理程序,接收2个参数,(事件处理程序名称，事件处理程序函数),必须与attachEvent()参数相同

匿名函数问题

box.attachEvent("click", function() {
  alert(1);
}, false);
box.detachEvent("click", function() {
  alert(1);
}, false);

//不能删除
可以通过函数表达式解决

var handler = function() {
        alert(1);
      };
      box.attachEvent("click", handler, false);
      box.detachEvent("click", handler, false);

添加多个事件处理程序

可以添加多个事件处理程序，多个事件处理程序会按照它们添加的相反顺序触发

区别

dom2级的方法与ie的方法的区别， dom2级的事件名没有on，ie的有
dom0级与ie的区别在于事件处理程序的作用域不同，dom0级的为元素的作用域,ie的为全局作用域

Tags: dom0, dom2, html