首页 > 代码库 > javascript事件
javascript事件
1.事件流
事件流是描述从页面中接收事件的顺序。
事件流类型：
事件冒泡和事件捕获
1）IE的事件流叫做事件冒泡：（从下往上传递知道document元素）
即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
所有浏览器都支持事件冒泡，但是IE5冒泡时会跳过html元素
2）事件捕获（从文档节点document从上往下传递）
DOM中的事件流：
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
2.事件对象（event对象）
DOM中的事件对象：
该对象可以直接使用event访问。
几个重要的属性：
currentTarget:和对象的this值一样，指向绑定该事件的元素
target：指向当前元素，如：点击事件，指向被点击的元素
注意：函数内部的this值，不一定等于event.target
type：事件的类型，返回的值没有前缀“on”
eventPhase：用来确定事件当前正处于事件流的哪个阶段。
值为1：事件处理程序处于捕获阶段
值为2：事件处理程序处于目标对象上
值为3：事件处理程序处于冒泡阶段
几个重要的方法：
preventDefault()：阻止事件的默认行为。但是只有在cancelable属性为true的事件，才能使用该方法。
stopPropagation()：阻止事件在DOM中的传播，即取消事件捕获或冒泡
IE中的事件对象：
访问IE中的event对象的几种方法：
1）DOM0级添加的事件处理程序，event对象通过window.event获得
2）通过attachEvent()添加的事件处理程序，event对象通过传入的event参数获得
3）HTML事件处理程序，event对象直接使用event获取
几个重要的属性：
srcElement：指向当前元素，类似于target
returnValue：为false时，阻止事件默认行为
cancelBubble：为false时，阻止事件冒泡
跨浏览器的事件对象：
如下：event = event || window.event
3.事件处理程序
为某个元素绑定某个事件处理程序的方法：
1）HTML事件处理程序
将事件直接添加在标签里
缺点：时差问题，当点击元素时，事件处理函数还未加载，会导致错误。解决：使用try-catch；
Javascript代码和HTML紧耦合；
不同浏览器对同一事件处理程序，可能存在不同的解析结果。
2）DOM0级事件处理程序（会在冒泡阶段被处理）
首先获得对象的引用，然后为他的事件属性赋值。如：btn.onclick = function(){......};
事件处理函数中：this引用当前元素
删除事件处理程序：将属性值设为null；如：btn.onclick = null;
3）DOM2级事件处理程序
添加事件：addEventListener( eventType, handler, capture )
删除事件：removeEventListener( eventType, handler, capture )
优点：可以添加针对于同一事件的多个事件处理程序，事件处理时，会按照添加的顺序依次处理。
注意：添加的事件只能通过删除方法来删除，且，如果添加的事件使用的是匿名函数，该事件无法移除。
this对象指向当前元素，因为，事件处理程序在所属元素的作用域中运行。
4）IE事件处理程序（只在冒泡阶段处理）
添加事件：attachEvent( eventType, handler )
删除事件：detachEvent( eventType, handler )
注意：eventType和DOM2级相比，有前缀“on”。
同样可以添加针对同一事件的多个事件处理程序，但是，事件处理时，会根据添加的顺序，以相反的顺序处理。
this对象等于window。因为IE中使用attachEvent()方法，事件处理程序在全局作用域上运行。
编写跨浏览器事件处理程序
如下：
addHandler : function( element,eventType,handler ){
if( element.addEventListener ){
element.addEventListener( eventType,handler,false );
}else if( element.attachEvent ){
element.attachEvent( ‘on‘+eventType,handler );
}else{
element[‘on‘+eventType] = handler;
}
},
removeHandler : function( element,eventType,handler ){
if( element.removeEventListener ){
element.removeEventListener( eventType,handler,false );
}else if( element.detachEvent ){
element.detachEvent( ‘on‘+eventType,handler );
}else{
element[‘on‘+eventType] = null;
}
}
注意：这样编写的代码，要注意作用域的问题，DOM2级和IE事件处理程序，添加事件后，事件处理程序的作用域不同。
所以不推荐使用this来访问当前元素。
代码地址：https://github.com/xiaoxiaojing/practiseCode/blob/master/function/event.js
javascript事件