Javascript 事件处理程序

事件处理程序

• 概念：
  事件 就是用户或者浏览器自身执行的某种动作（其实在 事件流 那一篇中已经介绍过 事件 的概念了）。
  所以什么是 事件处理程序 呢？响应某个事件的函数就叫做 事件处理程序 （或 事件侦听器）。事件处理程序 的名字通常以 on 开头。
• 组成：

1. HTML 事件处理程序
2. DOM0 级事件处理程序
3. DOM2 级事件处理程序
4. IE 事件处理程序

---

HTML 事件处理程序

• 概念：
  HTML 事件处理程序 就是我们常说的行内执行的 Javascript。在《高级javascript程序设计》中解释为：某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来制定。这个特性的值应该是能够执行的 Javascript 代码。

<input type="button" value="Click Me" onclick="alert('Clicked')" />
// 全部双引号技巧--需要转译
<input type="button" value="Click Me" onclick="alert(&quot;Clicked&quot;)" />
// 程序自动封装 event 对象
<input type="button" value="Click Me" onclick="alert(event.type)" />
// this 指向事件的目标元素
<input type="button" value="Click Me" onclick="alert(this.value)" />

• 缺点：

1. 存在一个时差问题。例如：函数在元素下方、页面最底部定义，用户在页面解析函数之前想要触发事件，这会引发错误。解决方法是外层包裹 try catch 语句，在浏览器处理错误之前就捕获错误事件。
2. 扩展事件的作用域链在不同浏览器中会导致不同结果。不同 Javascript 引擎 遵循的标识符解析规则略有差异，很可能在访问非限定对象成员时出错。
3. HTML 和 Javascript 的代码紧密耦合。更换事件处理程序，就要改两个文件。

• 支持：
  所有浏览器都支持！

综上，尽量不要使用行内 Javascript。

---

DOM0 级事件处理程序

• 概念：
  DOM0 级事件处理程序 就是将一个函数赋值给另一个事件处理程序属性。在第四代浏览器中出现，一直沿用至今，并且所有浏览器都支持。而且每个元素（包括 window 和 document）都有自己的处理程序属性，这些属性通常全部小写。例：onclick。

var btn =document.getElementById('myBtn');
btn.onclick = function () {
  alert("Clicked");
}

• 特点：

1. 在这些代码运行以前不会指定事件处理程序，所以在处理程序代码解析之前用户不能触发事件处理程序。
2. 使用 DOM0 级方法指定事件处理程序被认为是元素的方法。此时的事件处理程序是在元素的作用域中进行的。
3. 程序中的 this 指向引用的当前元素。可以使用 this 访问元素的任何属性和方法。
4. 不可以为一个元素添加多个方法，因为会根据优先级覆盖，只有最后添加的方法有效。

⚠️注意：以 DOM0 级方法添加的事件处理程序会在事件流的 冒泡阶段 被处理

• 移除事件：

btn.onclick = null;

---

DOM2 级事件处理程序

• 概念：
  DOM2 级事件定义了两个方法。处理指定：addEventListener()；删除事件：removeEventListener()。

• 参数：
  这两个方法都接受三个参数：

1. 要处理的事件名
2. 作为事件处理程序的函数
3. 布尔值（true 表示在捕获阶段调用事件处理程序；false 表示在冒泡阶段调用事件处理程序）强烈推荐 false！！因为大多数浏览器都支持事件冒泡，尽量做到兼容大多数浏览器。
4. this 指向引用的当前元素

⚠️注意：
1. 可以添加多个事件，执行顺序按照添加顺序执行
2. addEventListener() 添加的事件只能使用 removeEventListener() 来删除，且参数必须一致
3. addEventListener() 添加的匿名函数，使用 removeEventListener() 是删除不了的！！

var btn = document.getElementById('myBtn');

// 添加事件
btn.addEventListener("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);

• 支持：
  IE9、Firefox、Chrome、Opera、Safari 目前支持

---

IE 事件处理程序

• 概念：
  IE 在 DOM 中实现了两个方法：attachEvent()，detachEvent()；

• 参数：

1. 事件处理程序的名称
2. 事件处理程序函数

IE8 以及更早版本只支持事件冒泡，所以通过 attachEvent 添加的事件处理程序都会被添加到冒泡阶段。

• 特点：

1. 也可以为一个元素添加多个事件处理程序。
2. 但触发顺序跟 DOM2 级方法的顺序相反。
3. 添加的匿名函数不能被移除
4. this 指向 window

• 与 DOM0 级方法的区别：
  attachEvent() 添加的事件 this 指向 window; DOM0 级添加的事件 this 指向引用的当前元素。

• 支持：
  只有 IE 和 Opera 两个浏览器支持。

---