标签:
在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。
所有浏览器都支持event对象,event对象会传入DOM0级,DOM2级,HTML指定,的事件处理程序中,但支持的方式不同,所以也会涉及跨浏览器的部分。
function handler(){
alert(event.type);
};
EventUtil.addHandler(btn,‘click‘,handler);//接上篇笔记
event:在支持至少DOM2级的浏览器内,无论使用html特性指定,dom0级,2级,该对象都是该事件内置对象,可以在事件处理函数内直接使用。属性方法 | 类型 | 读写 | 说明 |
---|---|---|---|
bubbles | Blooean | 只读 | 表明事件是否冒泡 |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,如果bubbels为true,则可以使用这个方法 |
cancelable | Blooean | 只读 | 表明是否可以取消事件的默认行为 |
preventDefault() | Function | 只读 | 取消事件的默认行为,如果cancelable为true,则可以使用这个方法 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
target | Element | 只读 | 事件的目标 |
detail | Integar | 只读 | 与事件相关的细节信息 |
eventPhase | Integar | 只读 | 调用事件处理程序的阶段:1表示捕获阶段2表示处于目标3表示冒泡阶段 |
trusted | Blooean | 只读 | 为true表示事件是浏览器生成的,为false表示事件是由开发人员通过js创建的 |
type | String | 只读 | 被触发的事件的类型 |
view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
currentTarget
:this对象始终等于他的值,随着事件冒泡或者捕获,他得值等于捕获或冒泡到的上级元素的值。target
:只包含事件的实际目标。type
可以利用type属性为一个元素同时添加多类事件处理程序。
采用dom0级试试
var btn=document.getElementById(‘d1‘); var handler=function(){ switch(event.type){ case "click": alert("clicked"); break; case "mouseover": event.target.style.background=‘red‘; break; case "mouseout": event.target.style.background=‘yellow‘; break; } }; btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler;
<a href="http://www.baidu.com/" id="myherf">百度</a>
var Link=document.getElementById("myherf");
Link.onclick=function(){
event.preventDefault();
}
这样单击百度时,并不会跳转到百度的页面。 function handler(){
alert(event.type);
event.stopPropagation();
};
var btn=document.getElementById(‘d1‘);//body内的div var wrap=document.getElementById(‘wrap‘);//body function handler(){ alert(event.eventPhase) }; //单击btn btn.addEventListener(‘click‘,handler,false);//2处于目标对象 wrap.addEventListener(‘click‘,handler,false);//3冒泡阶段 wrap.addEventListener(‘click‘,handler,true);//1捕获
event对象只有在事件处理程序执行期间,才会存在,执行完毕即销毁。
var div=document.getElementById("test");
div.onclick=function(){
var event=window.event;//event为window对象
alert(event.type);
}
看到了分歧,结果是必然要编写一个可以跨浏览器的。
属性方法 | 类型 | 读写 | 说明 |
---|---|---|---|
cancelBubble | Blooean | 读/写 | 默认值为false,但将其设置为true就可以取消事件冒泡,与DOM中stopPropagation()的方法作用相同 |
returnvalue | Blooean | 读/写 | 默认值为true,但将其设置为fasle,就可以取消事件的默认行为,与DOM中的preventDefault()方法的作用相同 |
srcElement | Element | 只读 | 事件的目标,与DOM中的target属性相同 |
type | String | 只读 | 被触发的事件类型 |
var div=document.getElementById("test");
div.onclick=function(){
window.event.returnValue=false;
}
但是没有办法判定默认事件能否被取消。 var div=document.getElementById("test");
div.onclick=function(){
alert(‘ok‘)
window.event.cancelBubble=true;
}
因为IE8及以前只支持冒泡所以只能取消冒泡。跨浏览器的事件对象
这个面试会问道的,写一个通用的事件侦听函数!就写下面的就可以!bingo!
var EventUtil={ getEvent:function(event){ return event||window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, preventDefault:function(){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, stopPropagation:function(){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element["e"+type]=function(){ handler.call(element) } element.attachEvent("on"+type,element["e"+type]); }else{ element["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,element["e"+type]); element["e"+type]=null; }else{ element["on"+type]=null; } } };
标签:
原文地址:http://www.cnblogs.com/lanyueff/p/4604065.html