Javascript事件

2016/05/02
Javascript与HTML的交互主要通过事件来实现。

事件流

HTML标签是嵌套的，我们点击最里层的元素时，是不是点击了这个元素的所有父标签呢？
事件流描述了从页面中接受事件的顺序，IE的是事件冒泡，其它的是事件捕获。

事件冒泡

事件从最里层传递至最外层

事件捕获

事件从最外层传递至最里层

DOM 事件流

DOM2 级事件的事件流包括：捕获阶段、处于目标阶段、冒泡阶段
DOM2 级事件规范指明捕获阶段不涉及事件目标，但是仍有一些浏览器在这个阶段触发了对象上的操作事件。

IE8以及更早的浏览器不支持 "DOM 事件流"

事件处理程序

事件的名称比如click等，它们对应的事件函数称为事件处理程序。

HTML

这种因为脚本和HTML耦合度太高，现在的前端工程已经很少使用，不在赘述。

DOM0 级

var btn = document.getElementById('demo');
// 添加事件
btn.onclick = function(){
  alert(this.id); // this 为这个元素
};
btn.onclick = null; // 删除事件

DOM2 级

/*
  所有的 DOM 节点都支持这两个方法
  添加事件： addEventListener()
  删除事件：removeEventListener()
 */
var btn = document.getElementById('demo');
btn.addEventListener('click', function(){}, false); // 添加事件
btn.removeEventListener('click', function(){}, false); // 删除事件，这只是举例，其实无法删除，因为是匿名函数

两个方法都有三个参数

1. 事件名（不带on前缀）
2. 事件处理程序(即函数)
3. 布尔值（true则在捕获阶段触发2，false则在冒泡阶段触发2），为了兼容IE，都设置成false

匿名的事件处理程序无法删除
添加多个事件，顺序执行

IE

/*
  所有的 DOM 节点都支持这两个方法
  添加事件： attachEvent()
  删除事件：detachEvent()
 */
var btn = document.getElementById('demo');
btn.attachEvent('onclick', function(){
  alert(this); // this === window
}); // 添加事件
btn.detachEvent('onclick', function(){}); // 删除事件，这只是举例，其实无法删除，因为是匿名函数

两个方法都有三个参数

1. 事件名（带on前缀）
2. 事件处理程序(即函数)

添加多个事件，倒序执行