$13 事件

事件流：

事件流：页面接收事件的顺序。

IE定义的：事件冒泡流（由最具体的元素依次传播到DOM树的最上层的Document）

NetScape定义的：事件捕获流(由不具体的节点依次传播到具体的节点)

DOM事件流：先是捕获阶段，然后是处理目标阶段，最后是事件冒泡阶段。

事件处理程序：

a. HTML事件处理程序：

在HTML中加入事件代码：

事件中的代码可以在独立的JS中，事件代码在执行时，有权访问全局作用域中的任何代码。

缺点：

1.时差问题：

在JS程序还没有具备执行条件时，就执行了事件，这时会出现错误。

2.耦合问题：

HTML与JS代码紧密耦合，使得修改时需要对两者都进行修改。

3.JS引擎不同：

不同的JS引擎对其作用域的扩展方式解析不同，在访问非限定对象成员时会出错。、

b.DOM0级事件处理程序：

每个元素都有自己的事件处理程序属性。

var btn=document.getElementById("click");

btn.onclick=function () {

alert("clicked")

};

DOM0级是元素的方法，因此，事件处理程序是在元素的作用域中执行，程序中的this指向该元素。

该程序会在事件冒泡阶段被处理。

如何取消：btn.onclick=null;

c.DOM2级处理程序：

定义了两个方法：addEventListener()removeEventListener()

3个参数：事件名、事件处理程序的函数、布尔值（true事件捕获阶段处理，false事件冒泡阶段处理）

btn.addEventListener("click",function () {

alert("clicked")

},false);

优点：可以对同一元素定义多个事件，事件会顺序处理

btn.addEventListener("click",function () {

alert("clicked")

},false);

btn.addEventListener("click",function () {

alert(this.id);

},false);

注意：一般在事件冒泡阶段处理，这样可以最大程度兼容浏览器。

删除事件：

利用addEventListener()定义的事件处理程序只能通过removeEventListener()删除。

d. IE事件处理程序（IE Opera）

两个方法：attachEvent()detachEvent()，两个参数：事件类型、事件处理函数

注意：事件处理程序的作用域为全局作用域，而非元素的作用域。所以this为window。

可以定义多个事件处理程序，不过执行顺序相反。

var handler=function () {

alert("clicked")

};

btn.attachEvent("onclick",handler);

btn.detachEvent("onclick",handler);

e.跨浏览器的事件处理程序

利用能力检测对浏览器进行测试，分为三种情况：DOM2级、IE、DOM0级

主要方法：

设置一个对象EventUtil,该对象中保存两个属性：addHandler和removeHandler，两个属性对三种情况进行分类：

var EventUtil={

addHandler:function (element,type,handler) {

if(element.addEventListener){

element.addEventListener(type,handler,false);

}

elseif(element.attachEvent){

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

}

else{

element["on"+type]=handler;

}

},

removeHandler:function (element,type,handler) {

if(element.removeEventListener){

element.removeEventListener(type,handler,false)

}

elseif(element.detachEvent){

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

}

else{

element["on"+type]=null;

}

}

};

调用：

var btn=document.getElementById("button");

var handler=function () {

alert("clicked")

};

EventUtil.addHandler(btn,"click",handler);

EventUtil.removeHandler(btn,"click");

事件对象：event

a. DOM中的事件对象

兼容DOM的浏览器会将event对象传入到事件处理程序中。无论事件处理程序使用的是DOM0还是DOM2级。

var btn=document.getElementById("btn");

btn.onclick=function (event) {

alert(event.type)

};

btn.addEventListener("click",function (event) {

alert(event.type)

},false);

在需要一个事件处理函数处理多个事件时，可以使用type类型，利用switch语句进行指定。

b. IE中的事件对象

1.访问IE中的event方法：

DOM0:window.event

var btn=document.getElementById("btn");

btn.onclick=function () {

var event=window.event;

alert(event.type)

};

2.其他的DOM2IEHTML事件处理程序可以使用event。

c.跨浏览器中的事件对象

在上述的EventUtil对象中加入更多的属性

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{

element["on"+type]=handler;

}

},

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;

}

},

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;

}

}

};

使用：

先取得event，再使用其它属性。

varbtn=document.getElementById("btn");

btn.onclick=function (event) {

varevent=EventUtil.getEvent(event);

EventUtil.getEvent(event);

};

事件类型

一：UI事件：

UI不一定与用户操作有关。

1.load事件：

页面完全加载完毕后触发。也可以在图像元素上触发。

EventUtil.addHandler(window,"load",function (event) {

alert("加载完毕");

})

2.unload事件：

页面被完全卸载后触发，如页面切换。

3.resize事件：

浏览器窗口被调整到一个新的高度和宽度时触发。

EventUtil.addHandler(window,"resize",function (event) {

alert("调整高度");

})

4.scroll事件：

元素被滚动时触发

二：焦点事件：

最主要的是focus（元素获得焦点时触发）和blur（元素失去焦点时触发）

三：鼠标与滚轮事件：

9个鼠标事件：

click

mousedown

mouseup

mousemove

mouseenter

mouseleave

mouseout

mouseover

dbclick

1.客户区坐标位置：clientX

clientY

在浏览器视口中的位置(不加滚轮)

在浏览器视口中的位置(不加滚轮)

2.页面坐标位置: pageX pageY

在页面中的位置（加上滚轮）

3.屏幕坐标位置：screenX screenY

相对于电脑屏幕的位置，页面放大缩小也是相对于电脑屏幕

var

div=document.getElementsByTagName("div")[0];

EventUtil.addHandler(div,"click",function

(event) {

var

event=EventUtil.getEvent(event);

alert("CLIENTX:"+event.clientX+"screenX:"+event.screenX);

})

相关元素：

只有mouseover和mouseout才有的属性:

relatedTarget, IE中是fromElement和toElement,

其他

事件该属性为null

对于mouseover，相关元素是失去光标的元素，对于mouseout，相关元素是获得光标的元

素

var

div=document.getElementsByTagName("div")[0];

EventUtil.addHandler(div,"mouseover",function

(event) {

var

event=EventUtil.getEvent(event);

var

target=EventUtil.getTarget(event);

var

related=EventUtil.getRelatedTarget(event);

alert("相关元素:"+event.tagName+"鼠标移入:"+related.tagName);

})

鼠标按钮：

对mousedown和mouseup事件，在其event对象中有button属性

DOM中button属性有3个值：0（左键），1（滚轮），2（右键）

IE中的有8个值，0-7，这么多是没有意义的，用户很少同时按几个键，所以需要将其转换为

0，1，2即可。

在EventsUtil对象中加入getButton属性

"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 4:

return 1;

case 2:

case 6:

return 2;

return 2;

}

}

}

var div=document.getElementsByTagName("div")[0];

EventUtil.addHandler(div,"mousedown",function

(event) {

var event=EventUtil.getEvent(event);

var button=EventUtil.getButton(event);

alert("button属性值："+button);

})

鼠标滚轮事件：

mousewheel事件：其event对象中包含wheelDelta属性，wheelDelta是120的倍数，向前是正

值，向后是负值。

特殊情况：

Opera

9.5之前的版本中，正负号颠倒。

FireFox中的该事件名称为DOMMouseScroll,其属性为detail，detail是3的倍数，向前是负

值，向后是正值。

四：键盘与文本事件：

3个键盘事件：

Keydown:按下任意键触发

Keypress:按下字符键触发，可以影响文本显示的键也会触发（如退格键）

keyup：释放键触发

键盘上的每个键都有对应的键码，其对应的属性为keyCode

textInput事件：DOM3中新增的替代keypress的事件。与keypress的不同：只有在可编辑区

域可以触发textInput事件，并且只有能够输入实际字符的键才能触发。

复合事件：

针对同时按住多个键输出的字符。

变动事件：

DOM2级的变动事件处理的是DOM中的变化。比如删除节点、插入节点时的变化。

五：HTML5事件：浏览器自定义的事件

contextmenu事件：上下文菜单（通过鼠标右击实现）

点击我看菜单

百度

必应

天猫

EventUtil.addHandler(window,"load",function

(event) {

vardiv=document.getElementById("myDiv");

EventUtil.addHandler(div,"contextmenu",function (event) {

event=EventUtil.getEvent(event);

EventUtil.preventDefault(event);

varmenu=document.getElementById("Menu");

menu.style.left=event.clientX+"px";

menu.style.top=event.clientY+"px";

menu.style.visibility="visible";

})

EventUtil.addHandler(document,"click",function (event) {

document.getElementById("Menu").style.visibility="hidden";

})

})

beforeunload事件：当用户关闭该页面时触发对话框，让用户选择是否离开页面。

DOMContentLoaded事件：形成DOM树之后即可触发，而不用等待CSS、JS等的加载。

readystatechange事件：提供与文档或者元素的加载状态有关的信息。可用于加载外部JS和CSS。

pageshow和pagehide事件：在用户使用浏览器的后退和前进时加快页面的转换速度。

haschange事件：在URL的参数列表发生变化时通知开发人员。（在AJAX应用中，开发人员经常利用URL的参数列表保存状态）

六：设备事件：智能手机、平板电脑

orientationchange事件：屏幕的横向与纵向

window.orientation属性包括3个值：

0肖像模式

90向左旋转

-90向右旋转

MozOrientation事件：平面方向的变化。

deviceorientation事件：xyz发生变化

devicemotion事件：检测设备是否往下掉，是否被走着的人拿在手里。

七：触摸与手势事件：

触摸事件：

touchstart

touchmove

touchend

touchcancel

手势事件：两个手指触摸屏幕时触发

gesturestart

gesturechange

gestureend

内存和性能

添加大量的事件处理程序会导致页面的整体运行性能，主要原因为：

1.大量的事件处理程序就会有大量的函数，每个函数都是一个对象，会占用大量的内存。

2.需要事先指定DOM访问次数，延迟了页面的交互就绪事件。

处理方法：

1.事件委托：利用了事件冒泡

原方法：

var item1=document.getElementsByTagName("li")[0];

var item2=document.getElementsByTagName("li")[1];

var item3=document.getElementsByTagName("li")[2];

EventUtil.addHandler(item1,"click",function

(event) {

location.href="http://baidu.com";

});

EventUtil.addHandler(item2,"click",function

(event) {

location.href="http://bing.com";

});

EventUtil.addHandler(item3,"click",function

(event) {

location.href="http://tmall.com";

})

事件委托方法：在DOM树中尽量最高的层次上添加一个事件处理程序。

下面的代码的优点：只添加了一个事件处理程序，只取得了一个DOM元素，占用内存少。

var

item=document.getElementsByTagName("ul")[0];

EventUtil.addHandler(item,"click",function

(event) {

event=EventUtil.getEvent(event);

vartarget=EventUtil.getTarget(event);

switch(target.id){

case"baidu":

location.href="http://baidu.com";

break;

case"bing":

location.href="http://bing.com";

break;

case"tmall":

location.href="http://tmall.com";

break;

}

})

不是所有的事件都适合事件委托方式，适合的事件有：clickmousedown mouseupkeydown keyupkeypress

2.移除事件处理程序

当不需要事件时，需要进行事件处理程序的移除。

哪些情况不需要事件：

a.从文档中移除了带有事件处理程序的元素。

b.将带有事件处理程序的元素被innerHTML删除。

此时应该将事件设为null，btn.onclick=null;

模拟事件：利用JS来触发而非用户操作或者浏览器功能。

1.DOM中的事件模拟

a.模拟鼠标事件

b.模拟键盘事件

c.模拟其他事件

d.自定义DOM事件

方法：创建事件对象，初始化事件对象，触发事件。

2.IE中的事件模拟