Javascript 核心技术 第6章 捕捉事件
1.0级DOM上的事件句柄
事件句柄是对象的一个属性,语法为:onevent
A.内联模型(inline model)或内联注册模型(inline registration model)
将事件作为HTML元素的一个属性来增加的方式。
<body onload='onclick();'>
B.传统模型(traditional model) 或传统注册模型(traditional registration model)
这种将函数赋值给作为对象的一个属性的事件句柄的方法。
window.onload=onclick;
2.Event对象
function myEvent(event){
var theEvent=event?event:window.event;//获取事件对象
var target = event.target ? event.target :event.srcElement;//获取触发事件对象
alert(theEvent.type);
}
注意:1. Dom的事件对象 还定义了currentTarget属性,表示事件流经的对象,IE的事件对象中没有定义对应的属性。
2. DOM的事件对象中定义了relatedTarget属性,在mouseout或mouseover事件中分别表示鼠标进入或离开的对象。IE事件对象中有两个与relatedTarget属性相对应的属性,即
fromElement(鼠标离开的对象)和toElement(鼠标进入的对象)。
3.DOM中实现而IE对象没有的属性:
a. bubbles:是否冒泡事件
b. cancelable:事件是否可取消
c. eventPhase:事件所处的阶段。
e. detail :事件的详细信息
f. metaKey:事件发生时,metaKey是否按下
g.timestamp:事件发生的事件。
function stopEvent(event){
if(event.stopPropagation){
event.stopPropagation();//停止事件传播
event.preventDefault();//阻止默认行为
}else {
event.cancelBubble = true;//停止事件传播
event.returnValue = false;//阻止默认行为
}
}
3.事件句柄与this
4.2级DOM上的事件句柄
addEventListener语法:
object.addEventlistener('event',fnc,boolean);
removeEventListener语法:
object.remvoeEventListener('event',fnc,boolean);
attachEvent语法:
object.attachEvent("event",fnc);
detachEvent语法:
object.detachEvent("event",fnc);