以下大部分为学习《JavaScript 高级程序设计》(第 3 版) 所做笔记。
目录：
1. HTML 事件处理程序
2. DOM0 级事件处理程序
3. DOM2 级事件处理程序
4. IE 事件处理程序
5. 跨浏览器的事件处理程序
Q: 事件是什么？
A: 事件是用户或浏览器自身执行的某种动作。如 click、load 和 mouseover 都是事件的名字。
Q: 事件处理程序（或事件侦听器）是什么?
A: 响应某个事件的函数交事件处理程序（或事件侦听器）。
Q: 事件处理程序的命名有什么特点？
A: 以 “on” 开头，比如 onclick
在 HTML 中指定事件处理程序的缺点：
1. 存在时差问题。可能 HTML 元素出现在页面上时事件处理程序还不具备执行条件。
2. 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
3. HTML 与 JS 代码紧密耦合，如果要更换事件处理程序就需要改动两个地方。
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个特性的值应该是能执行的 JS 代码。
举个栗子：
这里用的 HTML 特性是 onclick，特性的值是 ” alert('clicked') “。
注意：特性的值中不能使用未经转义的 HTML 语法字符，比如&、""、<、>
举个栗子：
使用双引号的转义字符 "
HTML特性可以调用在页面其他地方定义的脚本
这样指定事件处理处理程序会创建一个封装着元素属性值的函数。这个函数中有一个局部变量 event。函数内部，this 值等于事件的目标元素。在函数内部使用 with 扩展作用域。
看看 event 是啥👉
点击按钮控制台输出：
看看 event.type 是啥👉
点击按钮控制台输出：
看看 this 👉
点击按钮控制台输出：
看看 this.value 👉
等同于
点击按钮控制台输出：
无需引用表单元素就能访问其他表单字段：
点击按钮控制台输出：
之所以能够实现无需引用表单元素就能访问其他表单字段，是因为动态创建的函数内部的 with 像下面这样扩展作用域：
很多 HTML 事件处理程序都会被封装在一个 try-catch 块中，举个栗子：
点击按钮控制台输出：
优点：1.简单 2.具有跨浏览器的优势
缺点：存在时差问题。可能 HTML 元素出现在页面上时事件处理程序还不具备执行条件。
点击按钮，控制台输出：
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除事件处理程序只需将属性的值设置为 null
支持 DOM2 级事件处理程序的浏览器：IE9、Firefox、Safari、Chrome、Opera
优点：可以添加多个事件处理程序。
"DOM2级事件" 定义了2个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 跟 removeEventListener()
这两个方法都接收3个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值
第三个参数为一个布尔值，true 跟 false 分别表示：
true：在捕获阶段调用事件处理程序。只在特别需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。
false：在冒泡阶段调用事件处理程序。大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以程度兼容各种浏览器。
点击按钮，控制台输出：
添加多个事件的执行顺序是按添加的顺序执行。
使用 removeEventListener() 移除使用 addEventListener() 添加的事件处理程序。
注意：如果第二个参数是匿名函数将无法移除。下面举正反两个栗子
能够移除：
无法移除：
支持 IE 事件处理程序的浏览器：IE、Opera
attachEvent 是很久的非标准方法，使用 attachEvent 很可能会提示“ 对象不支持“attachEvent”属性或方法 ”。
通过detachEvent() 移除 attachEvent() 添加的事件。
事件处理程序在全局作用域中运行，this 等同于 window。
事件处理程序以添加的相反顺序被触发。
举例略。
Q：开发人员怎么跨浏览器的方式处理事件？
A： 1. 有的会使用能够隔离浏览器差异的 JS 库
2. 有的会自己开发最合适的事件处理的方法，需要恰当地使用能力检测
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="button" id="myBtn" value="点我"/>
<script>
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] = null;
}
}
}
var btn = document.getElementById("myBtn");
var handler = function(){
console.log("按钮被点击了");
};
EventUtil.addHandler(btn, "click", handler);
</script>
</body>
</html>
浙公网安备 33010602011771号