Event
-
DOM操作 :获得DOM元素的引用,以便进行操作;改变DOM元素的外观,可以直接修改,也可以使用动画; 修改DOM元素的内容
-
事件:以上的操作都是在页面初始化、特定的事件或在一段时间发生后得以执行
1.事件流:事件流描述的是从页面中接收事件的顺序。
冒泡机制
IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
捕获机制
Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
2.“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段,可以在这个阶段对事件做出响应。
多数支持DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标。
3.阻止事件流的传播——调用event.stopPropagation()
4.事件处理程序 -
html
<input type="button" value="Click Me" onclick="alert('Clicked')" />
- DOM0
var btn = document.getElementById("myBtn");
btn.onclick = function(e){
alert("Clicked");};
// <!-- 优势:简单 -->
// <!-- 不足:仅能为指定元素指定事件添加一个事件处理程序 -->
- DOM2
定义:DOM2 级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法,并且它们都接受3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(e){
alert(this.id);
}, false);