作者:zccst
一、事件流
标准:DOM事件流中,实际的目标在捕获阶段不会接收到事件。即捕获从document到body就停止了。
在处于目标阶段,事件在div上发生,并在事件处理中被看成冒泡阶段的一部分。
实际:在捕获阶段会涉及,结果有两个机会在目标对象上操作事件。
二、事件处理程序(事件监听器)
事件处理程序:HTML,DOM0级,DOM2级
HTML:<input type="button" value="ClickMe" οnclick="alert('Clicked')" />需转义特殊字符
缺点:1)先调用后解析会报错;2)作用域链有浏览器差异性;3)html和js耦合较严重。
DOM0级:var btn = document.; btn.οnclick=function(){}; 冒泡阶段处理,删除用btn.οnclick=null即可;
DOM2级:addEventListener("click",function(){},true);//true在捕获阶段,false在冒泡阶段
好处:可以添加多个事件处理程序
removeEventListener();移除,但无法移除匿名函数,如果想移除需写命名函数
IE事件处理程序:
attachEvent("onclick",function(){}). IE8及更早版本,只支持事件冒泡
与DOM0级事件不同的是DOM0在所属元素的作用域内运行;在attachEvent()方法情况下,在全局作用域中运行,this等于window
var btn = document.getElementById("myBtn");
btn.attachEvent("click",function(){ alert ( this == window); });
也可以添加多个,不同的是执行顺序,与标准正好相反(后添加先执行)
detachEvent也不能移除匿名函数
注:支持IE事件处理程序的浏览器有IE何Opera。
跨浏览器,只需关注冒泡阶段
1,addHander(ele,type,handler) 视情况分别使用DOM0级、DOM2级防腐或IE防腐来添加事件
var EventUtil = { addHandler:function(elem,type,handler){ if(elem,addEventListener){ elem.addEventListener(type, handler, false); }else if(elem.attachEvent){ elem.attachEvent("on"+type, handler); }else{ elem["on"+type] = handler; } }, removeHandler:function(elem,type,handler){ if(elem.removeEventListener){
elem.removeEventListener(type, handler, false);
}else if(elem.detachEvent){
elem.detachEvent("on"+type, handler);
}else{
ele["on"+type] = null;
}
} }
这两个方法会先检测是否存在DOM2级,如果是IE浏览器,最后一种可能是DOM0级方法。
使用:
var btn = document.
var handler = function(){};
EventUtil.addHandler(btn,'click',handler);
三、事件对象
<input type="button" value="ClickMe" οnclick="alert(event.type)" />
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type);//"click"
};
btn.addEventListener("click",function(event){
alert(event.type);//"click"
}, false);
1,标准事件对象
event共有的成员:bubbles,cancelable(是否可以取消冒泡),currentTarget,defaultPrevented,preventDefault(),stopPropagation,target,type等
如果直接将事件处理程序指定给了目标元素,则this == currentTarget == target(currentTarget是绑定事件处理程序的对象)
如果事件处理程序存在于按钮的父节点中,则三者不相同。this和currentTarget指向父元素(target始终指向自身)
preventDefault() 阻止默认行为。比如a的默认行为是点击时导航到href指定的URL。 var link = document; link.οnclick=function(e){e.preventDefault();}
stopPropagation() 停止冒泡
eventPhase 1捕获阶段,2处于目标对象,3处于冒泡阶段。event.eventPhase
2,IE事件对象
cancelBubble, returnValue, srcElement, type
DOM0级:window.event
DOM2级:event
preventDefault() = returnValue(默认TRUE,设置FALSE可以取消事件的默认行为)
stopPropagation() = cancelBubble(默认FALSE,设置TRUE可以取消冒泡)
target = srcElement
var btn = document.getElementById("myBtn");
btn.οnclick=function(){
//alert(window.event.srcElement === this);//TRUE,DOM0级srcElement与this相同
}
btn.attachEvent("onclick",function(event){
alert(event.srcElement === this);//FALSE,DOM1级两者不相同
});
但DOM标准中是TRUE
btn.addEventListener("click",function(event){
alert(event.target === this);//TRUE
alert(event.currentTarget === this);//TRUE
})
3,跨浏览器事件对象
四个函数:
var UtilEvent = { addHandler:function(elem,type,handler){}, removeHandler:function(elem,type,handler){}, //添加四个新方法 getEvent:function(event){ return event?event:window.event; } getTarget:function(event){ return event.target||event.srcElement; } preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } };
实际使用的时候
btn.οnclick=function(){
event = UtilEvent.getEvent(event);//先用getTarget
var target = EventUtil.getTarget(event);
EventUtil.preventDefault(event);
}
四、事件类型
DOM3规定:
UI: load,unload,abort,error,select,resize,scroll
焦点:blur,focus,focusin/focusout(冒泡)
鼠标/滚轮 除了mouseenter/mouseleave不冒泡,其他都冒泡。顺序:down-up-click-down-up-click-db
ClinetX/ClientY所有浏览器都支持
pageX/pageY页面本身的左边和顶边计算的,而非浏览器。没有页面滚动时,两者相同。I8及更早不支持page
ScreenX/ScreenY屏幕坐标
相关元素:mouseover和mouseout,配对出现的。
键盘/文本:keydown,keypress,keyup。字符键down-press-up,非字符键down-up
合成事件
变动事件:删除节点,添加节点
HTML5事件:context,beforeunload
设备事件:
触摸与手势事件:touchstart,touchmove,touchend
五、内存和性能
1,事件委托
2,移除事件处理程序 btn.οnclick=null, onunload事件移除所有事件处理程序