1. IE的事件流是事件冒泡,即事件最开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。
2. 事件中的函数中 this指向引发事件的元素,通过这个可以访问到该元素,从而做相关处理。例如<input type="button" value="click me" onclick="alert(this.value)"> alert的内容是click me。
3. 非IE事件处理程序: addEventListener 和 removeEventListener 举例 addEventListener("click",function(){alert("ok you clicked me"},false); 第三个参数为事件处理方式,为true时表示捕获型,为false时表示冒泡型,一般使用冒泡型,捕获型已经很少使用。removeEventListener("onclick",handler,false); handler为指向attachEvent函数的引用如果要是用removeEventListener(),必须得这么写
var btn = document.getElementById("myBtn"); var handle = funciton(){alert("hey i'm here")}; btn.addEventListener("onclick",handle,false); btn.removeEventListener("onclick",hanldle,false);
4. IE事件处理程序:attachEvent()和detachEvent() attachEvent("onclick",function()); detachEvent("onclick",handler); handler为指向attachEvent函数的引用,因而如果要使用detachEvent。那么必须得这么写。
var btn = document.getElementById("myBtn"); var handle = funciton(){alert("hey i'm here")}; btn.attachEvent("onclick",handle); btn.detachEvent("onclick",hanldle);
5. DOM中的事件对象,兼容DOM的浏览器会将一个event对象传入到事件处理程序中。传入方法如下
var btn = getElementById("myBtn"); btn.onclick = function(event){alert(event.type);}
event 所有对象的共有内容:全部为只读
bubbles | Boolean | 返回布尔值,指示事件是否是冒泡事件类型。 |
cancelable | Boolean | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | Element | 返回其事件监听器触发该事件的元素。 |
defaultPrevented | Boolean | 为true表示已经调用了preventDefault() |
detail | Integer | 与事件相关的细节信息 |
eventPhase | Integer | 调用事件处理程序的阶段。1表示捕获阶段 2表示处于目标,3表示冒泡阶段 |
preventDefault | Function | 取消事件的默认行为。如果cancelable为true,则可以使用这个方法 |
stopImmediatePropagation() | Function | 取消事件的进一步捕获或者冒泡,同时阻止任何事件处理程序被调用 |
stopPropagation() | Function | 取消事件的进一步捕获或冒泡,如果bubbles为true,则可以使用这个方法 |
target | Element | 事件的目标 |
type | String | 被触发的事件的类型 |
trusted | Boolean | 为true表示事件是浏览器生成的,为false表示事件是由开发人员通过javascript新增的 |
view | AbstractView | 与事件关联的抽象视图。等同于发生时间的window对象 |
target与currentTarget的区别: target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。