注册事件处理程序onclick和addEventListener、attachEvent

一、设置HTML标签属性为事件处理程序（注意和下面的设置javascript对象属性为事件处理程序是不同的）

用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性。如果这样做，属性值应该是Javascript代码字符串。这段代码应该是事件处理程序函数的主体，而非完整的函数声明。当指定一串代码作为HTML事件处理程序属性的值时，浏览器会吧代码串转换为类似如下的函数中：

function(event){
　　with(){
　　　　with(){
　　　　　　with(this){
　　　　　　　　/* 这里是代码字符串 */
　　　　　　}
　　　　}
　　}
}

实例：

<form onsubmit="checkform();"></form>

这里的checkform并不是事件处理程序函数，它只会作为真正的事件处理程序函数的主体被调用，而非完整的函数声明，这就是为什么很多同学总是在这里写表单验证的时候就算return false也总是会将表单提交，写在checkform()函数里面的return false并没有起到作用，如果想在事件处理程序函数起到不提交的作用，应该改为<form onsubmit="return checkform();"></form>,请记住设置HTML标签属性为事件处理程序时，属性值即使时一个函数也并不是事件处理程序函数，它只是事件处理程序函数的主体。

function(event){
　　with(){
　　　　with(){
　　　　　　with(this){
　　　　　　　　return checkform();/* 这里是代码字符串 */
　　　　　　}
　　　　}
　　}
}

二、设置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事件模型不支持事件捕获，所以这两个方法只接受相 同的两个参数：事件处理程序名称与事件处理程序函数。由于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()可以使用相同的函数来移除事件处理程序。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

四、事件处理程序的返回值（补充）

通过设置对象属性或HTML属性注册时间处理程序的返回值有时是非常有意义的。通常情况下，返回值false就是告诉浏览器不要执行这个事件相关的默认操作。例如，表单提交按钮的onclick事件处理程序能返回false组织浏览器提交表单。（当用户的输入在客户端验证失败时，这是有用的。）类似的，如果欧诺个户输入不合适的字符，输入域上的onkeypress事件处理程序能通过返回false来过滤键盘事件。

window对象的onbeforeunload事件处理程序的返回值也非常有意义。当浏览器将要跳转到新页面时触发这个事件。如果事件处理程序返回一个字符串，那么它将出现在询问用户是否想离开当前页面的标准对话框中。

理解事件处理程序的返回值只对通过属性注册的处理程序才有意义这非常重要。接下来我们将看到使用addEventListener()或attachEvent()注册事件处理程序转而必须调用preventDefault()方法或设置事件对象的returnValue属性。明白的说就是return false对addEventListener()或attachEvent()是不起作用的，不能阻止默认操作，要通过preventDefault()来阻止默认操作。

var form= document.getElementById("myform");
form.addEventListener("submit",function(e){
      // 要用preventDefault()阻止默认行为
      e.preventDefault();
      // return false 没用
})