设置javascript对象属性为事件处理程序，注册事件处理程序最简单的方式就是通过设置时间目标的属性为所需事件处理程序函数。按照约定，事件处理程序属性的名字由"on"后面跟着事件名组成；onclick、onchange、onload、onmouseover等。注意这些属性名师区分大小写的，所有的都是小写，及时事件类型是由多个词组成。
缺点是其设计都是围绕着架设每个事件目标对于每种事件类型将最多只有一个处理程序。
var btn = document.getElementById("myBtn");btn.onclik = function(){ alert("thanks!"); }
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
要在按钮上为click事件添加事件处理程序，可以使用下列代码：
var btn = document.getElementById("myBtn");btn.addEventListener("click", function () { alert(this.id);}, false);
使用DOM2级方法添加事件处理程序的主要好处是可以为同一个对象注册同一事件类型的多个处理程序函数，而且不会覆盖对象属性为事件处理程序。来看下面的例子：
var btn = document.getElementById("myBtn");btn.onclick = function(){alert(this.id)}btn.addEventListener("click", function () { alert(this.id);}, false);btn.addEventListener("click", function () { alert("Hello World");}, false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var btn = document.getElementById("myBtn");btn.addEventListener("click", function () { alert(this.id);}, false);btn.removeEventListener("click", function () { //无效！ alert(this.id);}, false);
在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener()是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：
var btn = document.getElementById("myBtn");var handler = function () { alert(this.id); };btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false); //有效！重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数。
IE中实现了与DOM中用于处理指定和删除事件处理程序操作类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相 同的两个参数：事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡，所以同各国attachEvent()添加的事件处理程序都会被添加到冒泡 阶段。
在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。
var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function () { alert(this == window); //ture })
注意，attachEvent()第一个参数是“onclick”，而非DOM的addEventListener()方法中的“Click”。
与addEventListener()类似，attachEvent()方法可以用来为一个元素添加多个事件处理程序。来看下面的例子：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert("Clicked"); }); btn.attachEvent("onclick", function () { alert("Hello World!") ;});
使用attachEvent()添加事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着添加 的匿名函数将不能被移除。不过，只要能够将相对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。例如：
var btn = document.getElementById("myBtn");var handler = function () { alert("Clicked"); } btn.attachEvent("onclick", handler);btn.detachEvent("onclick", handler);
这个例子将保存在变量handler中的函数作为事件处理程序。因此，后面的detachEvent()可以使用相同的函数来移除事件处理程序。
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。
原标题：注册事件处理程序onclick和addEventListener、attachEvent
关键词：Listener
我知道了 