javascript 事件流

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指向当前事件活动的对象(一般为父级)。

原文地址:https://www.cnblogs.com/lifeisshort/p/4813939.html