对事件机制的理解

捕获阶段 –> 目标阶段 -> 冒泡阶段 –> 默认行为

非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事件

对事件机制的理解

猜你喜欢