JavaScript 和 HTML 之间的交互是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，可以使用侦听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。
事件流
事件冒泡
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，以下面的 HTML 页面为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果单击了页面中的 <div> 元素，click 事件的传播顺序为：<div> => <body> => <html> => document
事件捕获
事件捕获的事件传播顺序正好与事件冒泡相反
DOM 事件流
“DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件处理程序
事件就是用户或浏览器自身执行的某种动作，如 click、load 和 mouseover 等，都是事件的名字，而响应某个事件的函数就是事件处理程序（或事件侦听器），事件处理程序的名字以“on”开头
HTML 事件处理程序
- 方法一
<input type="button" value="Click Me" onclick="alert('Clicked')">
- 方法二
<input type="button" value="Click Me" onclick="showMsg()">
<script>
function showMsg() {
alert("Clicked");
}
</script>
单击后会调用 showMsg() 函数，这个函数在一个独立的 <script> 元素中，也可以被包含在一个外部文件中
DOM0 级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert("Clicked");
};
事件处理程序是在元素的作用域中运行，程序中的 this 引用当前元素，如 this.id 等于 myBtn
删除事件处理程序：btn.onclick = null;
DOM2 级事件处理程序
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert("Clicked");
}, false);
DOM2 级事件处理程序中定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener() ，它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值参数如果为 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
与 DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行，但 DOM2 级方法添加的事件处理程序可以添加多个事件处理程序，并且会按照它们添加的顺序触发。
addEventListener() 添加的事件处理程序只能通过 removeEventListener() 来移除，移除时传入的参数与添加处理程序时使用的参数相同，这意味着通过 addEventListener() 添加的匿名函数将无法移除，如：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert("Clicked");
}, false);
btn.removeEventListener("click", function() { // 无效！
alert("Clicked");
}, false);
var btn = document.getElementById("myBtn");
var handler = function() {
alert("Clicked");
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); // 有效！
IE 事件处理程序
IE 实现了与 DOM 中类似的两个方法：attachEvent() 和 detachEvent()，这两个方法接收相同的两个参数：事件处理程序名称和事件处理程序函数。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function() {
alert("Clicked");
});
注意：第一个参数是
onclick，而不是addEventListener()中的click
与 DOM0 级方法的主要区别在于，用 DOM0 级方法，事件处理程序会在其所属元素的作用域中运行，而在使用 attachEvent() 方法的情况下，事件处理程序运行在全局作用域中， this 等于 window
attachEvent() 方法也可以我用来为一个元素添加多个事件处理程序，但是以添加的相反的顺序触发
detachEvent() 方法与 removeEventListener() 相同，必须提供相同的参数，添加的匿名函数不能被移除
跨浏览器事件处理程序
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
}
网友评论