JavaScript高级程序设计（学习笔记）

第13章 事件

一.事件

1.1事件冒泡：事件发生时从里面向外传播   如：div>body>html>document

1.2事件捕获：事件发生时从外层向里层传播   如  document>html>body>div

1.3  DOM事件流是三个阶段：事件捕获，处于目标阶段 事件冒泡

二.事件处理程序

2.1 html事件处理程序

1.event  通过event变量可以直接访问事件对象，不用自己定义也不用从函数中读取，

1. This  this的值等于事件的目标

三.DOM0 就是把一个函数赋值给事件处理程序，每个元素都有自己的事件处理程序，

3.1 DOM0的格式如下

Var btn=document.getelementBy(“id”)

Btn.onclick=function(){

Alert(“aaa”)

}

3.2DOM2级事件处理程序

定义了两个方法：1.addEventListener()

2.removeEventListener()

他们分别接受三个参数：处理的事件名、作为事件处理程序的函数、一个布尔值，布尔值=ture时表示在捕获阶段调用事件处理程序，布尔值=false时 表示在冒泡阶段调用事件处理程序

格式：

Btn.addEventListener(“click”,function(){

Alear(“aaa”)

} ,false)

Btn.addEventListener(“click”,function(){

Alear(“bbb”)

} ,false)

如上可以为一个元素绑定多组事件，使用此方法添加的事件必须使用removeEventListener()来移除，并且保证传入的参数完全相同，也不能是匿名函数（此时的函数必须要有名称）

3.3 IE事件处理程序

定义的方法：

1.attachEvent()

2.detachEvent()

此方法接受两个参数：事件处理程序名称、事件出库程序函数（IE8以及更早的版本只支持冒泡事件）

注意：在IE中使用attachEvent()与只用dom0级方法的主要区别在于事件处理程序的作用域在dom0下事件处理程序会在其所属元素的作用域内运行，而是使用attachEvent()此方法是在全局运行，因此this指的是window

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

var handler=function(){

alert("click")

}

var EventUtil = {

addHandler: function(btn,click,handler){

if(btn.addEventListener){

btn.addEventListener(click,handler,false);

}

else if(btn.attachEvent){

btn.attachEvent("on"+click,handler);

}

else{

btn["on"+click] = handler;

}

},

removeHandler: function(btn,click,handler){

if(btn.removeEventListener){

btn.removeEventListener(click,handler,false);

}

else if(btn.detachEvent){

btn.detachEvent("on"+click,handler);

}

else{

btn["on"+click] = null;

}

}

}

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

四．事件对象

1.DOM中的事件对象（event）

属性和方法：

Bubbles: 表明事件是否冒泡

Cancelable: 是否取消事件的默认行为

currentTarget: 事件处理程序当前处理的事件是哪个元素

defaultPrevented: 为ture是表示调用了preventDefau（）

detail: 与事件相关的细节效果

eventPhase: 调用事件处理程序的阶段：1表示捕获、2表示“处于目标”3.表示冒泡。

preventDefault(): 取消事件的默认行为，如果cancelable是ture则使用这个方法

stopImmediatePropagation（）：取消事件进一步捕捉或冒泡，

stopPropagation(): 取消事件进一步捕捉或冒泡，如果bubbles为ture时，则使用此方法。

target：事件目标

trusted:  为ture表示事件是浏览器生成的，为false表示事件是开发人员创建

type ： 被处罚的事件类型

view ： 与事件关联的抽象视图，等同于发生事件的window

注意:对象this始终等于currentTarget,而target则是包含事件的实际目标，如果直接将处理事件程序直接给了目标元素，则三者包含相同的值，当涉及到冒泡事 三则不一定相等

2.IE中的事件对象

属性和方法：

canceBubble:默认值是false，但将其设置为ture时就可以取消事件冒泡

returnValue: 默认值是flase，将其设置为ture时可以取消默认行为；

srcElement : 事件的目标

Type： 被触发的事件类型

五．事件类型

1. 位置

clienX

clienY

表示的是事件发生时鼠标指针在视口的位置，

视口：就是居浏览器内容区域（类似首屏大小），但不涉及页面滚动影响

pageX

pageY

表示的是光标在页面中的位置，就是居内容区域头部和左边的距离，受scrollLeft,scrollTop的影响.

screenX

screenY

表示的是当前元素相对于整个电脑屏幕的坐标，

2.鼠标按钮

点击事件中存在event的detail属性，对于单击事件来说detail中包含一个数值，表示在给定位置上发生了多少次单击，该属性从1开始计数。

offsetX:光标相对于目标元素边界的X坐标

offsetY：光标相对于目标元素边界的Y坐标

3.鼠标滚轮事件

Mousewheel 鼠标滚轮事件，其包含一个特殊属性 wheelDelta,当滚轮向前滚动时wheelDelta是120的倍数，当滚轮向后滚动时wheelDelta是-120的倍数，

注意：对与Firefox支持的一个名为DOMMouseScroll的类似事件，而有关鼠标的滚轮信息则保存在detail的属性中，

当滚轮向前滚动时wheelDelta是3的倍数，当滚轮向后滚动时wheelDelta是-3的倍数，

，