1.事件流:描述从页面接收事件的顺序。IE提出冒泡流,Netscape提出捕获流。
1.1 事件冒泡
事件开始时由最具体的元素(嵌套最深)接收,然后逐级向上传播到最外层节点(文档)。
1.2 事件捕获
从最外层不太具体的节点收到事件,传递给最内层的具体的节点。
1.3.DOM事件流
事件捕获阶段、目标阶段、事件冒泡阶段
捕获阶段:事件从ducument->html->body
目标阶段:事件在div上发生。在事件处理中被看成冒泡阶段的一部分。
冒泡阶段:事件传回document
2.事件处理
2.1.HTML事件处理
指定onclick属性:
缺点:时差问题、扩展事件处理程序的作用域链在不同浏览器有不同结果、HTML和JavaScript代码耦合。
摒弃此种方法,使用JavaScript指定时间处理程序。
2.2.DOM0级事件处理
使用DOM0级方法指定的事件处理程序被认为是元素的方法,这时候事件处理程序时在元素作用域中运行,程序中this引用当前元素。
2.3.DOM2级事件处理
定义了两个方法:添加事件addEventListener() 删除事件 removeEventListener()
接收三个参数:要处理的事件名、作为事件处理的函数、布尔值。
布尔值为true,表示在捕获阶段调用事件处理
布尔值为false,表示在冒泡阶段调用时间处理
使用addEventListener()添加的事件处理程序,只能用removeEventListener()移除,移除的参数与添加参数相同,通过addEventListener()添加的匿名函数将无法移除。
重写之后可以移除
可用的浏览器:
2.4.IE9之前版本事件处理
IE实现和DOM2事件处理类似的两个方法
attachEvent()和detachEvent()。
接收两个参数:事件名称,事件处理函数。IE8及之前版本只支持事件冒泡,所以不需要第三个参数。
注意:在IE中使用attachEvent()的作用域是全局作用域,this等于window。
使用attachEvent()添加的事件,只能使用detachEvent()来移除,同样参数必须相同。
2.5.跨浏览器的事件处理
定义了两个方法addHandler和removeHandler()
接收三个参数,元素,事件类型,事件处理方法。
首先判断有没有DOM2的方法
没有再判断有没有IE的方法
没有就使用DOM1,这里直接给元素添加了属性。
3.事件对象
3.1 DOM中的事件对象
兼容DOM的浏览器都会将event对象传入到事件处理程序中。
在需要一个函数处理多个事件时,可以使用type属性。
-
阻止特定事件的默认行为
-
停止事件在DOM层次的传播,只会弹出一次警告框,body上的被禁止传播。
-
事件对象的eventPhase属性:确定当前事件位于事件流的那个阶段。捕获1,目标处理2,冒泡3。
3.2 IE中的事件对象
访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。
i)DOM0级方法添加事件处理程序
event对象作为window属性存在
ii)DOM2,使用attachEvent(),就会有一个event对象作为参数被传入事件处理函数。
-
取消给定事件的默认行为,与DOM中preventDefault()方法作用相同。
-
停止事件冒泡,与DOM中stopPropagation()方法作用相同。
3.3 跨浏览器事件对象
4 事件类型
4.1 UI事件
-
load事件
当页面完全加载后在window上出发,当体香加载完在img元素上触发。
i)window上的事件有如下两种方式:
ii)img的load事件
-
unload事件
文档完全被卸载时触发。用户从一个页面切换到另一个页面会触发。
-
resize事件
当浏览器窗口被调整到一个新的高度或宽度时,会触发resize事件。
-
scroll事件
以上代码输出页面垂直滚动位置
4.2 焦点事件
会在页面获得或失去焦点时触发。
4.3 鼠标与滚轮事件
-
客户区坐标位置
相对于浏览器窗口的位置:clientX,clientY
-
页面坐标位置
判断在页面中的位置,从页面本身而非视口的左边和顶边计算的。pageX,pageY。没有滚动时与clientX,clientY相等。
-
屏幕坐标位置
相对于整个电脑屏幕的位置:screenX,screenY
-
四个修改键
4.4 键盘与文本事件
三个键盘事件
1)键码
发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。
2)字符编码
如果按下的是字符,使用charCode属性获取值。
3)textInput事件
用户在可编辑区输入字符时,触发该事件。
用户按上档键和s,data值为S
没有按上档键,data值为s
5.内存和性能
5.1事件委托
对于事件处理程序过多的问题解决方案就是事件委托,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
要给所有的li添加事件,只需要为ul添加一个事件。