JavaScript-事件

JS事件

事件分类

• 用户触发类：鼠标、键盘
• 页面触发类：资源加载过程

事件传播

总体分为三阶段：

1. 捕获阶段：从window开始，从外到内，由不具体到具体目标
2. 目标阶段：事件到达事件发生现场
3. 冒泡阶段：和捕获相反，事件从具体目标到外层window

IE8及以下，只有冒泡没有捕获

事件委托(代理)

一句话总结就是将目标元素的事件监听委托给它的父元素进行监听。举个栗子：在一个有多个子项li的无序列表ul中，需要监听其中某个子li上的事件。我们将事件监听绑定到父元素ul上，当子元素li发生事件时，由于冒泡机制，父元素ul也会触发。这样的话，以前每增加一个li就需要给新增的li新增一个监听事件，而通过委托给父元素ul，可以来提高事件处理的性能。

如何判断点击的是li还是ul，可以通过对象的event.target来区分

事件的处理

1. DOM0级

<button id='btn' onclick='onClick()'>按钮</button>

或

var myBtn = document.getElementById('btn')
myBtn.onclick = onClick
var onClick = function () {}

2. DOM1级

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型

3. DOM2级

//监听事件
element.addEventListener(eventType, callback, useCapture);
//解除监听
element.removeEventListener(eventType, callback, useCapture);
//手动触发事件
element.dispatchEvent(eventType)

由于事件传播存在捕获和冒泡阶段，useCapture表示是否在事件捕获阶段执行回调。默认为false，主要为了兼容旧版IE（只有冒泡）

IE8以下事件的实现

//监听事件
element.attachEvent('on' + eventType, callback);
//解除监听
element.detachEvent('on' + eventType, callback);
//手动触发事件,兼容性IE6-10
element.fireEvent('on' + eventType)

事件中的this

attachEvent中的this指向window，addEventListener指向当前的元素

自定义事件

// 新建事件实例
var event = new Event('build');

// 添加监听函数
child.addEventListener('build', function (e) {
    console.log(' custom event build');
}, false);

// 触发事件
child.dispatchEvent(event);

Event对象实例方法

• Event.preventDefault: 取消浏览器对当前事件的默认行为

事件对象的cancelable属性为true条件下

• stopPropagation: 方法阻止事件在DOM中继续传播（冒泡）

参考：

---

• JS事件简单总结
• 阮一峰 事件模型