JavaScript 与 HTML 之间的交互是通过事件实现的。事件最早是在 IE3 和Netscape Navigator 2 中出现的，当时是作为分担服务器运算负载的一种手段。在 IE4 和 Navigator 4 发布时，这两种浏览器都提供了相似但不相同的 API，这些 API 并存经过了好几个主要版本。DOM2级规范开始尝试以一种符合逻辑的方式来标准化 DOM 事件。IE9、Firefox、Opera、Safari 和 Chrome 全都已经实现了“DOM2 级事件”模块的核心部分。IE8 是最后一个仍然使用其专有事件系统的主要浏览器。
事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。IE9、Opera、Firefox、Chrome 和 Safari 都支持 DOM 事件流；IE8 及更早版本不支持 事件捕获。
事件处理程序
有四种指定事件处理程序的方法
- 使用HTML属性指定，如：
// 使用这种方式指定事件处理程序的话，相当于将onclick属性值作为一段js代码包裹在一个函数里面然后指给该元素对象的onclick属性
// 该函数内部有一个局部变量event
<button type="button" onclick="alert(event.type)">click me</button>
// 也可以在里面执行其他函数，在该函数内部可以访问全局作用域里的其他函数
<button type="button" onclick="showMessage()">click me</button>
// 这个动态创建的函数使用with扩展作用域
// with语句的作用就是在代码块内部访问变量时，现将其看作局部变量，如果找不到，就在传入的参数对象内部查找该属性
function(){
with(document){
with(this){
//元素属性值
}
}
}
// 因此下面的innerText === this.innerText
<button type="button" onclick="alert(innerText)">click me</button>
// 如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素的入口，这个函数就变成了如下所示：
function() {
with(document) {
with(this.form) {
with(this) {
//元素属性值
}
}
}
}
// 这样的下面的代码就可以理解了
form method="post">
<input type="text" name="username" value="">
<input type="button" value="Echo Username" onclick="alert(username.value)">
</form>
- DOM0级指定方法
var btn = document.getElementById("myBtn");
// 这种方法比较简单，在冒泡阶段触发，不过不能为同一个元素添加多个事件处理程序
btn.onclick = function() {
alert(this.id); //"myBtn"
};
//删除事件处理程序
btn.onclick = null;
- DOM2级指定方法（IE9以上）
var btn = document.getElementById("myBtn");
// 第三个参数为true，表示在捕获阶段触发，一般不使用
btn.addEventListener("click", function(e) {
alert(this.id);
}, false);
// 主要好处是可以添加多个事件处理程序，会按照添加它们的顺序触发
// 移除时传入的参数要与添加处理程序时使用的参数相同。这也意味着匿名函数将无法移除
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！
- IE8及以下使用的方法
// 只支持冒泡阶段触发，第一个参数和DOM2相比多了'on'
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
// this指向window而不是元素本身
alert(this === window); //true
alert("Clicked");
});
// 也可以用来为一个元素添加多个事件处理程序，不过不是以添加它们的顺序执行，而是以相反的顺序被触发。
// 和DOM2一样，匿名函数将无法移除
事件对象
一些比较重要的属性
- currentTarget：代表被触发事件处理程序的那个元素
- target：代表事件的实际目标，一次交互只会有唯一一个目标
- eventPhase：1-捕获阶段 2-处于目标上 3-冒泡阶段
- preventDefault()：取消事件的默认行为
- stopPropagation()：取消事件的进一步捕获或冒泡
IE的事件对象的一些比较重要的属性
- srcElement：等于target
- cancelBubble：默认为false，但将其设置为true就可以取消事件冒泡（与stopPropagation()方法的作用相同，不过只能取消冒泡）
- returnValue：默认为true，但将其设置为false就可以取消事件的默认行为（与preventDefault()方法的作用相同）
网友评论