DOM事件总结

基本概念

DOM事件模型

DOM事件模型就是 捕获和冒泡

• 捕获：从上往下。
• 冒泡：从下（目标元素）往上。

DOM事件流

指的是事件传递的三个阶段。就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。

1. 捕获：从 window 对象传到 目标元素。
2. 目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
3. 冒泡：从目标元素传到 Window 对象。

DOM事件捕获的具体流程

捕获阶段，事件依次传递的顺序是：window --> document --> html–> body --> 父元素、子元素、目标元素。

冒泡的流程

与捕获的流程相反

Event对象的常见方法

1. 阻止默认行为

event.preventDefault();

• 比如，已知 <a>标签绑定了click事件，此时，如果给<a>设置了这个方法，就阻止了链接的默认跳转。

2. 阻止冒泡

event.stopPropagation();

• 例如：单击子元素时，子元素和父元素都会做相应处理。这个时候，就要用到阻止冒泡了。

两个重要属性（事件委托中用到）

event.currentTarget   //当前所绑定的事件对象。在事件委托中，指的是【父元素】。

event.target  //当前被点击的元素。在事件委托中，指的是【子元素】。

自定义事件

var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
    console.log('clickTest');
});

//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest

DOM事件的级别

• DOM事件的级别，准确来说，是DOM标准定义的级别。包括：

1. DOM0的写法：

element.onclick = function () {
	//事件处理 ···
}

2. DOM2的写法：

element.addEventListener('click', function () {
	//事件处理 ···
}, false);

上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。

3. DOM3的写法：

element.addEventListener('keyup', function () {
	//事件处理 ···
}, false);

DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。