JavaScript权威指南读书笔记——第十七章 事件处理

注册事件处理程序

设置JavaScript对象属性为事件处理程序

window.onload=funciton(){
    //code
}

设置HTML标签属性为事件处理程序

<button onclick="alert('hello');"></button>

当指定一串JavaScript代码作为HTML事件处理程序属性时，浏览器会把代码串转换为类似如下的函数中：

funciton(event){
    with(document){
        with(this.form || {}){
            with(this){
                code...
            }
        }
    }
}

addEventListener()

参数一：要注册处理程序的时间类型（不需要前面加on）
参数二：当指定类型的事件发生时应该调用的函数。
参数三：该参数是一个布尔值，一般情况下，会给这个参数传递false。如果true，那么函数注册为捕获事件处理程序。

document.getElementById("id").addEventListener("click", handMouseMove,false);

removeEventListener()

它同样有三个参数，从对象中删除事件处理程序函数而非添加，它常用于临时注册事件处理程序。

document.getElementById("id").removeEventListener("click", handMouseMove,false);

attachEvent()

如果IE不支持addEventListener()和removeEventListener()，那么就是用attachEvent()和detachEvent()。

这两种操作的区别：

• 因为IE不支持事件捕获，所有这两个方法只有两个参数。
• 这两个方法的第一个参数是用带“on”前缀的时间。
• atttachEvent允许相同的事件处理程序注册多次。

var b = document.getElementById("myButton");
var handler = function(){code...};
if (b.addEventListener){
    b.addEventListener("click",handler,false);
    b.removeEventListner("click",handler,false);
}
else{
    b.attachEvent("onclick",handler);
    b.detachEvent("onclick",handler);
}

事件处理程序的调用

时间处理程序的参数

通常调用事件处理程序时把事件对象作为它们的第一个参数。

在IE中，当调用它们事件处理函数时并未传递事件对象。取而代之，通过全局对象window.event来获取事件对象。

function(event){
    event = event || window.event;
}

事件处理程序的运行环境

当使用addEventListener()注册时，调用的处理程序使用事件目标作为他们的this值。但是，对于attachEvent()来讲这是不对的。

function addEvent(target, type, handler){
    if (target.addEventListner)
        target.addEventListner(type,handler,false);
    else
        target.attachEvent("on"+type,function(event){
            handler.call(target,event);
        });
}

事件处理程序的返回值

通常情况下，返回值false就是告诉浏览器不要执行这个事件相关的默认操作。

使用addEventListener()或attachEvent()注册事件处理程序转而必须调用preventDefault()方法或设置事件对象的returnValue属性。

调用顺序

• 通过设置对象属性或HTML的处理程序优先调用
• 使用addEventListener()注册处理程序按照它们的注册顺序调用
• 使用attachEvent()注册的处理程序可能按照任何顺序调用

事件传播

大部分事件会“冒泡”到DOM树根。调用目标的父元素的事件处理程序，然后调用在目标的祖父元素上注册的事件处理程序。这会一直到Document对象，最后到达Window对象。

事件冒泡是事件传播的第三个“阶段”。目标对象本身的事件处理程序调用是第二个阶段。第一个阶段甚至发生在目标出现程序调用之前，称为“捕获”阶段。

事件取消

用属性注册的事件处理程序的返回值能用于取消事件的浏览器默认操作。在支持addEventListener()浏览器中，也能通过preventDefault()方法取消事件的默认操作。在IE9之前的IE中，可以通过设置事件对象的returnValue属性为false来达到同样的效果。

function cancelHandler(event){
    var event = event || window.event;
    if (event.preventDefault)
        event.preventDefault();
    if (event.returnValue
        event.returnValue = false;
    return false;
}

在支持addEventListener()的浏览器中，可以调用事件对象的stopProgation()方法以阻止事件的传播。