捕获阶段 –> 目标阶段 -> 冒泡阶段 –> 默认行为
非IE:
IE:
阻止事件默认行为
非IE: event.preventDefault()
IE: event.returnValue=false;
阻止冒泡
非IE: event.stopPropagation ()
IE: event.cancelBubble=true;
冒泡阶段注册事件
非IE:
event.addEventListener (type, callback,
false
)
移除:
removeEventListener
true表示事件句柄在捕获阶段(由外到内)执行
false(默认)表示事件句柄在冒泡阶段(由内到外)执行
IE:
event.attachEvent (‘on’+type, callback)
移除:detachEvent
else:
event[‘on’+type] = callback
移除:= null;
DOM0级事件
onclick 这种,只能绑定一次,新的覆盖旧的 在冒泡阶段执行
DOM2级事件
addEventListener这种,能多次绑定,顺序执行
模拟事件
var btn=document.getElementById(“mybtn”);
非IE:
var event = document.createEvent(“MouseEvent”);
event.initMouseEvent(“click”,true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
btn.dispatchEvent(event); //在这一步会设置event.target,以及触发事件类型
IE:
var event = document.createEventObject();
event.screenX=100;
event.screenY=100;
event.clientX=100;
event.clientX=100;
event.ctrlKey=false;
btn.fireEvent(“onclick”,event); //在这一步会设置event.serElement, 以及触发事件类型
自定义DOM事件
var event=document.createEvent(“CustomEvent”);
event.initCustomEvent (type,bubble,cancelable,detail);
textbox.dispatchEvent(event);
例子:
<html>
<body>
<div>
<button id="button">click</button>
<input type="text" id="inputText"/>
</div>
</body>
</html>
var input=document.getElementById("inputText");
EventUtil.addEventListener(input,"myevent",function(event){
event=EventUtil.getEvent(event);
alert(event.detail.message); //访问detail中的信息
});//注册时事件
var button=document.getElementById("button");
button.function(){
if(document.implementation.hasFeature("CustomEvents","3.0")){ //检查是否支持
var event=document.createEvent("CustomEvent");
event.initCustomEvent("myevent",true,false,{message:"helloworld"});
input.dispatchEvent(event);
} //通过button按钮触发事件
}
IE中document.createEventObject()方法不支持自定义的DOM事件