javascript 事件机制

1.事件冒泡  从具体的到最不具体的，从节点最深的到document

2.事件流  和事件的冒泡完全相反，

3.HTML事件

<input type="button" value='按钮' οnclick="alert('hello')"/>

4.DOM0事件

<input type="button" value='按钮' id="btn1"/>

var btn1 = document.getElementById("btn1'')

添加事件：btn1.onclick = fun;

移除事件：btn1.onclick = null;

5.DOM2事件

<input type="button" value='按钮' id="btn1"/>

var btn1 = document.getElementById("btn1'')

添加：btn1.addEventListener("click",fun,false);

移除：btn1.removeEventListener("click",fun,false);

1.addEventListener(type,handler,boolean)

  removeEventListener(type,handler,boolean)

上面两个中type不需要on

btn1.attachEvent("onclick",fun);

btn1.detachEvent("onclick",fun);

2.attachEvent(type,handler)

detachEvent(type,handler)

上面两个需要on

6.Event 

function show(e){

e = e || window.event;//window.event是在ie早期版本中使用的这样就可以得到一个兼容的event

｝

type    事件类型

target 事件的目标

preventDefault(); 阻止默认事件的发生

stopPropagation() 停止冒泡

以上方法在早期的ie中是不能使用的，

type 事件类型

srcElement 事件目标

returnValue = false 当为false的时候表示阻止默认事件的发生，为ture时不阻止

cancelBubble = true 表示阻止冒泡，

 

7.兼容的事件处理（仿jQuery）

var Util={

//添加事件

addEvent:function(target,type,handler){

if(target.addEventListener){

target.addEventListener(type,handler,false);

}else if(target.attachEvent){

target.attachEvent("on"+type,handler);

}else{

target["on"+type] = handler;

}

},

//移除事件，这里移除的只能是通过上面的方式添加的事件

removeEvent:function(target,type,handler){

if(target.removeEventListener){

target.removeEventListener(type,handler,false);

}else if(target.detachEvent){

target.detachEvent("on"+type,handler);

}else{

target["on"+type] = null;

}

}

// 阻止冒泡

stopBubble:function(e){

e = e|| window.event;

if(e.stopPropagation){

e.stopPropagation();

}else if(e.cancelBubble){

e.cancelBubble = true;

}

}

//阻止默认事件

stopDefault:function(e){

e = e || window.event;

if(e.preventDefault){

e.preventDefault();

}else if(e.returnValue){

e.returnValue = false;

}

}

// 得到触发事件的源

getScrElement:function(e){

e = e||window.event;

if(e.target){

return e.target;

}else  if(e.srcElement){

return e.srcElement;

}else{

reutrn null;

}

}

 

}