DOM交互事件

事件是浏览器或文档交互的瞬间，如点击事件，是 JS 与 HTML 交互的桥梁。

事件流有两种：

  • 事件捕获：事件从根节点向下传递，最终到达具体节点。

  • 事件冒泡：事件从最底层的节点向父级节点传递。

事件模型

  • DOM0 级模型

  • IE 事件模型

  • DOM2 级模型

DOM0 级模型

又称“原始事件模型”，此时还没有事件流的概念。所有浏览器都支持。

绑定事件

（1）在 HTML 中绑定

1
<input type="button" onclick="fun"/>

（2）通过 JS 绑定

1
2
3
4
var btn = document.getElementById('btn');
btn.onclick = fun;
// 移除监听函数
btn.onclick = null;

IE 事件模型

支持事件流。

有两个过程：

  • 事件处理阶段（target phase）：事件到达目标节点后，触发事件监听

  • 事件冒泡阶段（bubbling phase）：目标节点处理完事件后，事件向上冒泡，检查上级节点有没有设置监听函数，有则触发。

事件的绑定和移除

1
2
3
4
5
attachEvent(eventType, handler);
detachEvent(eventType, handler);

btn.attachEvent('onclick', showMessage);
btn.detachEvent('onclick', showMessage);

DOM2 级模型

W3C 标准模型，现代浏览器（除 IE6-8 之外的浏览器）都支持该模型。

发生一次事件共有三个过程：

  • 事件捕获阶段（capturing phase）：事件从document向下传播，检查是否有监听，有则执行

  • 事件处理阶段（target phase）：事件到达目标节点，触发监听函数

  • 事件冒泡阶段（bubbling phase）：事件从目标元素冒泡到document，检查是否绑定了监听，有则执行

绑定和移除事件监听

1
2
3
// useCapture是否在捕获阶段调用处理函数
addEventListener(eventType, handler, useCapture);
removeEventListener(eventType, handler, useCapture);

事件对象

事件对象的常用属性

IE事件模型中：

  • type：事件类型

  • srcElement：事件目标节点

  • cancelBubble：取消事件冒泡标记

  • returnValue：阻止事件默认行为标记

DOM事件模型中：

  • type

  • target：事件目标

  • stopPropagation()：阻止事件冒泡

  • preventDefault()：阻止事件默认行为

事件代理

事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。

优点：减少事件注册的数量，节省内存。

缺点：增加事件处理函数的复杂度，需要判断是哪个子节点触发的，可能出现误判。

1
2
3
4
5
box.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'input') {
    // some code
  }
});

自定义事件

（1）创建一个事件

1
2
3
4
var event = new Event('threeclick', {
    'bubbles': true,
    'cancelable': false
});

（2）在合适的时机触发该事件

1
target.dispatchEvent(event);

（3）注册监听函数

1
2
3
target.addEventListener('threeclick', function(){

}, false);