JavaScript高级程序设计 事件学习笔记_javascript技巧

第12章 事件

1.事件流

1.1事件冒泡（IE事件流）

□事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。

□所有浏览器均支持事件冒泡。Firefox、chrome、safari将事件一直冒泡到window对象。

1.2事件捕获（Netscape事件流）

□不太具体的节点更早收到事件，而具体的节点最后收到节点。

□Safari、chrome、Opera、firefox支持，但从window对象开始捕获（DOM2级规范是从document开始）。

1.3DOM事件流

□“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

□DOM2：捕获阶段不含实际目标，不涉及事件目标，只为截获事件提供机会。

□Safari、chrome、Firefox和Opera9.5以上都会在捕获阶段触发事件对象上的事件。结果有两个机会在目标上操作事件。

□IE不支持DOM事件流。其他支持。

2.事件处理程序（或事件侦听器）

定义：响应某个事件的函数。

2.1 HTML事件处理程序

□某个元素支持的每种事件，都可以使用一个相应事件处理程序同名的HTML特性来指定。

□其中的函数代码字符需经过HTML转义。

□存在问题：

◇时差问题：当触发事件时，事件处理程序有可能尚不具执行条件。使用try-catch块封装，以便错误不会浮出水面。



◇HTML与JavaScript代码紧密耦合。

2.2 DOM0级事件处理程序

□DOM0级事件处理程序：将一个函数赋值给一个事件处理程序属性。优点：简单、跨浏览器。

□这种方式的事件处理程序在代码运行以前不会绑定事件。

□使用DOM0级方法指定的事件处理程序被认为是元素的方法。事件处理程序在元素作用域中运行；程序中this引用当前元素。

□删除DOM0级事：btn.onclick = null; //删除事件处理程序

2.3 DOM2级事件处理程序

□addEventListener()和removeEventListener()。接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

◇如果最后这个布尔值是true，表示捕获阶段调用事件处理程序；如果是false表示冒泡阶段调用事件处理程序。

Var btn = document.getElementById("myBtn");

Btn.addEventListener("click",function(){alert(this.id);},false);

□使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。按添加顺序触发。

□通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。即匿名函数无法移除。

□将事件处理程序添加到冒泡阶段，得到最大限度兼容。

□Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序。IE不支持，有独有的事件处理程序。

2.4 IE事件处理程序。

□IE中与DOM2类似方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。

□IE仅支持冒泡，通过attachEvent()添加的事件处理程序都被添加到冒泡阶段。

□attachEvent()中事件处理函数会再全局作用域中运行，因此this等于window。

□attachEvent()也可以为元素添加多个处理程序，以相反的书序触发。

□attachEvent()事件可通过detachEvent()移除，匿名函数无法移除。

2.5 跨浏览器的事件处理程序

var EventUtil = {

addHandler : function(element, type, handler){

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

element.attachEvent("on" + type, handler);

}else{

elmenet["on" + type] = handler;

}

],

removeHandler : function(element, type, handler){

if(element.removeEventListener){

element.removeEventListener(type, handler, false);

}else if(element.detachEvent){

element.detachEvent("on"+type, handler);

}else{

element["on"+type] = null;

}

}

};

□此兼容函数没有考虑到浏览器的所有问题，如IE中作用域问题。

3.事件对象

定义：在触发DOM的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

3.1DOM中的事件对象

①兼容DOM的浏览器会将一个event对象传入到事件处理程序中（DOM0级或DOM2级）。通过HTML特性指定时，event变量保存event对象。

②所有event对象均包含以下属性/方法。P291

□bubbles：表明事件是否冒泡，bool。

□cancelable：表明是否可以取消事件的默认行为，bool。

□currentTarget：其事件处理程序当前正在处理事件的那个元素。

□detail：与事件相关的细节信息。

□eventPhase：调用事件处理程序的阶段：1.捕获 2.处于目标 3.冒泡。

□preventDefault()：取消事件默认行为。

□stopPropagation()：取消事件的进一步捕获或冒泡。

□target：事件的目标。

□type：被触发的事件类型。

□view：与事件关联的抽象视图。

③在事件处理程序内部：

□对象this始终等于currentTarget的值，即this和currentTarget均指向绑定该事件程序的元素。

□target则只包含事件的实际目标，即触发事件的元素。

④event.preventDefault()：可取消特定事件的默认行为。

⑤event.stopPropagation()：立即停止事件在DOM中的传播。

⑥通过eventPhase属性确定事件当前正位于事件流哪个阶段。

3.2 IE中的事件对象

①访问IE中的event对象，取决于指定的事件处理程序方法。

□使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

□使用attachEvent()添加，则有一个event对象作为参数传入。同时也可以通过window.event访问。

□通过HTML特性指定事件处理程序时，可以通过一个名叫event的变量访问event对象。

②IE中所有的event对象包含以下属性/方法：

□cancelBubble：默认为false，设为true可取消事件冒泡（类似DOM中的stopPropagation()方法）

□returnValue：默认为true，设为false可取消事件默认行为。（类似DOM2中的preventDefault()方法）

□srcElement：事件的目标（与DOM2中target属性相同）

□type：被触发的事件类型。

3.3 跨浏览器的事件对象

var eventUtil = {

getEvent : function(event){

Return event ? Event : window.event;

},

getTarget : function(event){

return event.target || event.srcElement;

},

preventDefault : function(event){

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue = false;

}

},

stopPropagation : function(event){

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

}

};

4.事件类型

□鼠标事件，当用户通过鼠标在页面上执行操作时触发；

□键盘事件，当用户通过键盘在页面上执行操作时触发；

□HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。

□变动（mutation）事件，当底层DOM结构发生变化时触发。

4.1 UI事件

UI事件主要与元素焦点相关，仅在兼容DOM的浏览器中受到支持：

□DOMActive：表示元素已经被用户操作（通过鼠标或键盘）激活；

□DOMFocusIN：表示元素已经获得焦点；为HTML中focus事件的普通版；

□DOMFocusOut：表示元素已经失去焦点；为HTML中blur事件的普通版；

△由于支持的浏览器很少，不推荐使用。

4.2 鼠标事件

①DOM中定义了7个鼠标事件，页面上所有元素都支持鼠标事件：

□click：在用户单击主鼠标按钮（一般式左边的按钮）或者按下回车键时触发。

□dblclick：在用户双击主鼠标按钮（一般是左键）时触发。

□mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

□mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。新移入的元素可能在旧元素外部，也可以是其子元素。不能通过键盘触发。

□mouseover：在鼠标指标为于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不通过键盘触发。

□mouseup：在用户释放鼠标按钮时触发。不通过键盘触发。

□mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发。

②注意事项：

□同一个元素上相继触发mousedown和mouseup事件才会触发click事件。如果mousedown或mouseup其中之一取消，就不会触发click事件。

□同一元素连续两次触发click事件，才会触发dblclick事件。

4.2.1 客户区坐标位置

□鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象（event）中的clientX和clientY属性中。

4.2.2 屏幕坐标位置

□鼠标事件发生时，还有一个相对于整个电脑屏幕的位置。保存在事件对象（event）中的screenX和screenY属性中。

4.2.3 修改键

□虽然鼠标事件主要是使用鼠标来触发，但按下鼠标时键盘上的某些键也可以影响到所需操作。

□修改键为：Shift、Ctrl、Alt和Meta（苹果中cmd键、windows中windows键）。

□DOM中表示这4个键的布尔值属性：（在鼠标事件的event中）shiftKey、ctrlKey、altKey和metaKey（IE不支持metaKey）。

4.2.4 相关元素

发生mouseover和mouseout事件时，会涉及更多元素。两事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。

□DOM通过evnet对象的relatedTarget属性提供了相关元素信息。

□IE不支持relatedTarget属性。

◇在mouserover事件触发时，IE的fromElement属性中保存了相关元素。

◇在mouseout事件触发时，IE的toElement属性保存了相关元素。

□兼容方式：

var eventUtil = {

getRelatedTarget : function(event){

if(event.relatedTarget){

return event.relatedTarget;

}else if(event.toElement){

return event.toElement;

}else if(event.fromElement){

return event.fromElement;

}else{

return null;

}

}

};

4.2.5 鼠标按钮

□click事件：单击鼠标主键触发，无必要检测按键信息。

□mousedown和mouseup事件，在其event对象中有一button属性表示按下或释放的按钮。

□DOM中的button属性取值：

◇0表示主鼠标按键

◇1鼠标中键（滚轮按钮）

◇2鼠标次键

□IE提供的button属性

◇0没按键◇1按主键◇2按次键◇3同时主+次◇4中键◇5主+中◇6次+中◇7主+次+中

□兼容代码

getButton : function(event){

if(document.implementation.hasFeature("MouseEvents","2.0")){

return event.button;

}else{

switch(event.button){

case 0 :

case 1 :

case 3 :

case 5 :

case 7 :

return 0;

case 2 :

case 6 :

return 2;

case 4 :

return 1;

}

}

}

};

□如果不是按下或释放主键，opera不会触发mouseup或mousedown

4.2.6 更多的事件信息

□DOM2中detail属性：元素单击次数，离离开元素后清0.

□IE为鼠标增加更多信息。（仅IE支持，并无实用价值）。

4.2.7移动Safari

面向iPhone和Ipod中Safari开发时：

□不支持dblclick事件。双击Safari窗口会放大画面，无法改变该行为。

□轻击可单击元素先触发mousemove事件，若导致内容变化则无其他事件发生。若无内容变化，一次发生mousedown、mouseup和click。

□mousemove事件也会触发mouseover和mouseout事件。

4.2.7 易访问性问题

屏幕阅读器只可通过click来触发事件。使用鼠标事件时应该注意：

□使用click事件执行代码

□不要使用onmouseover向用户显示新选项。屏幕阅读器无法触发。

□不要使用dblclick执行重要操作。键盘无法触发。

4.3 键盘事件

①对键盘事件的支持主要遵循DOM0级。“DOM3级”为键盘事件制定了规范。

②3个键盘事件：

□keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。

□keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。

□keyup：当用户释放键盘上的键时触发。

□与鼠标事件一样，支持相同的修改键。而且键盘事件对象中也有shifKey、ctrlKey、altKey、metaKey属性。

4.3.1 键码

①发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码与键盘上一个特定的键对应。

②keyCode属性值与ASCII码中对应小写字母或数字的编码相同。查表P304

③DOM和IE的event对象都支持keyCode属性。

④以下是无论keydown或keyup事件都会存在的一些特殊情况：

□Firefox和Opera中，按分号键时keyCode值为59，即ASCII中值，但IE和Safari返回186，即键盘键码

□Safari3之前版本中，上下左右，上下翻页返回大于6300的值。

□在Opera9.5之前版本中，会将非数字字母键的keyCode设为ASCII编码。

□在Safari3之前版本，不会因为按下了制表、上档、控制或替代键而触发keydown和keyup事件。

4.3.2 字符编码

□Firefox、Chrome和Safari的event对象支持一个charCode属性，这个属性只有在发生keypress时才有值，为字符的ASCII编码。此时的keyCode值有可能为0，也可能为所按键码。

□IE和Opera则是在keyCode中保存ASCII编码。

□跨浏览器取字符编码

var EventUtil = {

//省略的代码

getCharCode : function(event){

if(typeof event.charCode == "number"){

return event.charCode;

}else{

return event.keyCode;

}

},

};

4.3.4 textInput事件

□当用户在可编辑区域中输入字符时，会触发textInput事件。

◇只有编辑区域才能触发textInput事件。

◇事件只会在用户按下能够输入实际字符的键时才会被触发。

◇事件event对象中包含一个data属性，保存用户输入的字符。

□2008年上半年，仅Safari3和Chrome支持。

4.3.4 设备中的键盘事件。（略）

4.4 HTML事件

①定义：HTML事件指的是那些不一定与用户操作有关的事件。

□load事件：

◇当页面完全加载后window上面触发。

◇当所有框架都加载完毕时在框架集上面触发

◇当图像加载完毕时在
元素上面触发

◇当嵌入的内容加载完毕时在