- 事件冒泡
IE的事件流叫做事件冒泡,事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点。
点击页面中的div元素,click事件会按如下顺序传播:
div
body
html
document
2.事件捕获
不太具体的节点应该更早的接收到事件,而最具体的节点应该最后接收到事件,其目的在于事件到达预定目标之前捕获它。
则上面例子的事件捕获顺序变为如下所示:
document
html
body
div
3.DOM事件流
DOM2级事件规定事件流有三个阶段:
a 事件捕获阶段,为截获事件提供机会
b 处于目标阶段,实际目标收到事件
c 事件冒泡阶段,这个阶段对事件作出响应
捕获阶段:事件从document到body后就停止了
处于目标阶段:事件在div上发生,并被看成冒泡的一部分
4.事件处理程序
事件:用户或者浏览器自身执行的某种动作
事件处理程序(或事件侦听器):响应某个事件的函数
为事件指定处理程序的方式:HTML事件处理程序,DOM0级事件处理程序,DOM2级事件处理程序
- HTML事件处理程序
<input type="button" value="Click Me" onclick="alert(event.type)">
HTML事件处理程序的特殊点:
a 会创建一个封装着元素属性值的函数,该函数中有一个局部变量event,即事件对象
b 在a创建的函数中,this等于事件的目标元素
c a创建的函数扩展作用域的方式
- HTML事件处理程序的缺点:
a. 时差问题。js代码在页面底部,还没有被加载,就点击了html元素,则会出错
b. 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果
c. html与js代码紧密耦合
- DOM0 级事件处理程序
DOM0级方法指定的事件处理程序被认为是元素的方法,因此事件处理程序是在元素的作用域中运行的,即程序中的this引用当前元素。
var btn = document.getElementById('myBtn');
btn.onclick = function() {
//'myBtn'
alert(this.id);
}
DOM0级方式添加的事件处理程序会在事件的冒泡阶段被处理
删除DOM0级方法指定的事件处理程序
btn.onclick = null;
- DOM2级事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。
var btn = document.getElementById('myBtn');
var handler = function() {
alert(this.id);
};
btn.addEventListener('click',handler,false);//添加事件
btn.removeEventListener('click',handler,false);//移除事件