事宜流
事宜流形貌的是页面吸收事宜的递次.IE的事宜流是冒泡流,而 Netscape Communicator的事宜流是事宜捕捉流.
事宜冒泡是指事宜开始时由最详细的元素，然后向上传播到较为不详细的节点.一切当代浏览器都支撑事宜冒泡,IE9,Firefox,chrome,safari则将事宜一向冒泡到window对象.
事宜捕捉是不太详细的节点应当更早吸收到事宜,而详细的节点应当末了吸收到事宜.
DOM事宜流
DOM2级事宜流划定的事宜流包括三个阶段: 事宜捕捉阶段 处于目的阶段 事宜冒泡阶段
事宜处置惩罚顺序
HTML事宜处置惩罚顺序
以on+事宜名(比方onclick)作为事宜目的的属性,属性值为事宜处置惩罚顺序,在html中定义的事宜处置惩罚顺序能够包括要实行的详细行动,也能够挪用页面其他地方定义的剧本.
<input type="button" value='click me' onclick="alert('Clicked');"/><input type="button" value="click me" onclick="showMessage()"/>
function showMessage(){
alert("Hello world!");
}DOM0级事宜处置惩罚顺序
DOM0级事宜处置惩罚顺序是在js中处置惩罚的，它的上风是简朴,现在一切浏览器支撑优越，而且不会与html代码发作耦合.
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('clicked me！');
};这里是把事宜处置惩罚顺序赋值给了DOM对象的属性,这个属性的组成是on+事宜名,比方onclick`onblur`onload.
DOM2级事宜处置惩罚顺序
DOM2级事宜定义了两个要领addEventListener removeEventListener，这两个要领都吸收三个参数.第一个参数代表事宜范例;第二个参数代表事宜处置惩罚顺序;第三个参数是指在冒泡阶段照样捕捉阶段处置惩罚事宜处置惩罚顺序,假如为true代表捕捉阶段处置惩罚,假如是false代表冒泡阶段处置惩罚.
IE9，google，Firefox兼容DOM2级事宜处置惩罚顺序.
var btn = document.getElementById('btn');
//事宜处置惩罚顺序
function handler(){
alert('click!');
}
//注册事宜处置惩罚顺序
addEventListener('click',handler,false);
//注销事宜处置惩罚顺序
removeEventListener('click',handler,false);注:增加匿名事宜处置惩罚顺序没法被注销
IE事宜处置惩罚顺序
IE8及以下浏览器不支撑DOM2级事宜处置惩罚顺序,但也本身定义了attachEvent`detachEvent`两个要领,这两个要领只接收两个参数,由于IE8及以下版本不支撑事宜捕捉,所以没有第三个参数.
var btn = document.getElementByID("btn");
//事宜处置惩罚顺序
function handler(){
alert('click!');
}
//注册事宜处置惩罚顺序
attachEvent('click',handler,false);
//注销事宜处置惩罚顺序
detachEvent('click',handler,false);跨浏览器的事宜处置惩罚顺序
综合以上几种事宜处置惩罚顺序,我们封装出了一个跨浏览器的事宜处置惩罚顺序对象.
var EventUtil ={
//注册事宜处置惩罚顺序
addEventHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent) {
element.attachEvent('on'+type,handler);
}
else{
element['on'+type]=handler;
}
},
//注销事宜处置惩罚顺序
removeEventHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type]=null;
}
}
};
var btn = document.getElementById('btn'),
handler=function(event){
alert(this.value);
};
EventUtil.addEventHandler(btn,'click',handler);事宜对象
在触发DOM的某个事宜时,会发作一个事宜对象,这个对象包括着一切与事宜相干的信息。包括致使事宜的元素,事宜的范例,以及其他与特定事宜相干的信息.比方鼠标操纵致使的事宜对象中,包括鼠标位置的信息,键盘定义的事宜中包括按下键相干的信息.一切浏览器支撑event对象,但支撑体式格局差别.
DOM中的事宜对象
兼容DOM的浏览器会将一个event对象传入到事宜处置惩罚顺序中.DOM0和DOM2都邑传入event. html事宜处置惩罚顺序也有event对象.
var btn = document.getElementById("btn");
btn.onclick = function(event){
alert(event.type);
}
btn.addEventHandler('click',function(event){
alert(event.type);
},false);
触发的事宜范例不一样,可用的属性和要领也不一样.不过一切事宜的event对象都有大众成员,这里列出几个经常运用的属性和要领.
属性
currentTarget指向某个元素,事宜处置惩罚顺序发作在此元素上target事宜的目的type事宜范例eventPhase事宜所处阶段事宜
preventDefault()作废事宜的默许行动stopPropagation()作废事宜的进一步冒泡或捕捉
在事宜处置惩罚顺序内部,对象this一直即是currentTarget的值.而target则只包括事宜的现实目的.
IE中的事宜对象
运用DOM0级事宜处置惩罚顺序时,event对象作为window对象的一个属性存在;
运用attachEvent()事宜处置惩罚顺序时,event对象作为参数传入.
跨浏览器的事宜对象
var EventUtil = {
//增加事宜
addEventHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent) {
element.attachEvent('on'+type,handler);
}
else{
element['on'+type]=handler;
}
},
//移除事宜
removeEventHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type]=null;
}
},
//猎取事宜对象
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;
}
}
};运用以上定义的EventUtil对象,能够在一切浏览器中进行进行事宜的增加,移除,猎取事宜对象,猎取事宜目的,阻挠事宜冒泡,阻挠事宜默许行动.
