事件
13.1 事件流 事件流描述的是从页面中接收事件的顺序。
13.11 事件冒泡(event bubbling)
事件开始时从最具体的元素接收,然后逐级向上传播到较为不具体的节点。
13.12 事件捕获(event capturing)
不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
尽管“DOM2级事件”规范要求时间应该从document对象开始传播,但浏览器都是从window对象开始捕获事件的。
13.13 DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
13.2 事件处理程序 事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。 而相应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序(相当于相应元素的事件处理程序属性??)的名字以“on”开头,因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。
为事件指定处理程序的方式有好几种:
13.21 HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HMTL特性来指定。
例:
//<input type="button" value="Click Me" onclick="alert('Clicked')" />
其中指定的js代码,不能使用未经转义的HTML语法字符,例如&、""、<、>等。如果要用到这些符号,需要用相应转义字符代替:
//<input type="button" value="Click Me" onclick="alert("Clicked")" /> //"表示双引号
除了直接在特性里写代码,还可以引用页面其他地方定义的脚本:
//<input type="button" value="Click Me" onclick="showMessage()" />
这样指定的事件处理程序具有一些独到之处:
1. 这样会创建一个封装着元素属性值的函数,这个函数中有一个局部变量event,也就是事件对象。
在这里的代码作用域中的this直接指向事件的目标元素。
2. 关于这个动态创建的函数,另一个特点是它扩展作用域的方式:在这个函数内部,可以像访问局部变量一样访问document及该元素本身的成员。
...
13.22 DOM0级事件处理程序
传统方式:将一个函数赋值给一个事件处理程序属性。
每个元素(包括window和document)都有自己的事件处理程序属性,通常全部小写(例onclick)。将这种属性的值设置为一个函数,就可以指定事件处理程序。
例:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
注意,在这些代码被浏览器读取之前不会指定事件处理程序,因此如果这些代码位于页面中较靠后的位置,若页面加载很慢,有可能在一段时间内点击没反应。
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,事件处理程序是在元素的作用域中运行。this会引用当前元素,可以在事件处理程序中通过this访问元素的任何属性和方法。
触发时间:以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序:将事件处理程序的值设为null。
13.23 DOM2级事件处理程序
指定事件处理程序:addEventListener()
删除事件处理程序:removeEventListener()
三个参数:事件名、事件处理程序的函数、布尔值(true表示捕获阶段调用、false表示冒泡阶段调用)
与DOM0级一样,这里添加的事件处理程序也在其元素所处的作用域中运行,this则指向该元素。
优点:可以添加多个事件处理程序,(按添加顺序触发)。
例:...
删除事件处理程序:
通过addEventListener()添加的事件处理程序,只能用removeEventListener()来移除。移除时传入的参数与添加处理程序时使用的参数相同。因此,addEventListener()添加的匿名函数将无法移除。
例:...
触发时间:多数情况下将事件处理程序添加到事件流的冒泡阶段,可以最大限度地兼容。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。
13.24 IE事件处理程序
指定事件处理程序:attachEvent()
删除事件处理程序:detachEvent()
两个参数:事件处理程序名称、事件处理程序函数
IE8及更早版本只支持事件冒泡
例:...
与DOM0级的区别:事件处理程序的作用域不同,这个方法添加的事件处理程序会在全局作用域
13.25 跨浏览器的事件处理程序
13.3 事件对象
13.4 事件类型
13.5 内存和性能
13.6 模拟事件