事件——JavaScript高级程序设计笔记（10）

第13章 事件

1. IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
   事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它

2. 如果想要使用双引号，那么就要将代码改写成如下所示：
   <input type="button" value="Click Me" onclick="alert(&quot;Clicked&quot;)" />

3. 通过HTML 指定事件处理程序的最后一个缺点是HTML 与JavaScript 代码紧密耦合。如果要更换事
   件处理程序，就要改动两个地方：HTML 代码和JavaScript 代码。而这正是许多开发人员摒弃HTML 事
   件处理程序，转而使用JavaScript 指定事件处理程序的原因所在

4. DOM0 级事件处理程序-
   每个元素（包括window 和document）都有自己的事件处理程序属性，这些属性通常全部小写，
   例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：
   var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
   使用DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在
   元素的作用域中运行；换句话说，程序中的this 引用当前元素。来看一个例子。
   var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
};
   也可以删除通过DOM0 级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设
   置为null 即可：
   btn.onclick = null; //删除事件处理程序
   将事件处理程序设置为null 之后，再单击按钮将不会有任何动作发生。

5. DOM2级事件处理程序
   addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
   要在按钮上为click 事件添加事件处理程序，可以使用下列代码：
   var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
   上面的代码为一个按钮添加了onclick 事件处理程序，而且该事件会在冒泡阶段被触发（因为最后一个参数是false）。与DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子
   var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
   移除
   var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！

6. 事件对象
   var btn = document.getElementById(“myBtn”);
   btn.onclick = function(event){
   alert(event.type); //”click”
   };
   btn.addEventListener(“click”, function(event){
   alert(event.type); //”click”
   }, false);
   在需要通过一个函数处理多个事件时，可以使用type 属性。例如：
   var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn. onmouseout = handler;
   要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在
   被单击时会导航到其href 特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的
   onclick 事件处理程序可以取消它，如下面的例子所示。
   var link = document.getElementById(“myLink”);
   link.onclick = function(event){
   event.preventDefault();
   };