多種方法實作JS動態新增事件_javascript技巧

方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('測試');");
但是IE不支援用setAttribute 設定某些屬性，包含物件屬性、集合屬性、事件屬性，也就是說用setAttribute 設定style、onclick、onmouseover 這些屬性在IE 中是行不通的。

方法二、用attachEvent 和addEventListener
IE 支援attachEvent，object.attachEvent(event,function)，例如：

複製程式碼

程式碼如下:


obj.attachEvent("onclick", Foo);
function Foo()

{
{
alert("測試");
}

或寫成obj.attachEvent("onclick", function(){alert("測試");}); 其它瀏覽器支援addEventListener，element.addEventListener(type,listener,useCapture，

複製程式碼


程式碼如下：obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測試");

}


同樣也可寫在一起obj.addEventListener("click", function(){alert("測試");}, false);

注意attachEvent 的事件帶on，如onclick，而addEventListener 不帶on，如click。 複製程式碼

程式碼如下:


考慮相容性：
if (window.Event(window. )//相容IE
{
//IE 的事件代碼
}
else
{
//其它瀏覽器的事件代碼

}


上面有兩種添加事件的方法,為了同一添加事件的方法,我們不得不再重寫一個通用的添加事件函數：

版本一： 複製程式碼

程式碼如下:


function addEvent(elm, evType, fn, useCapture) {
>if ) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elelm. attachEvent('on' evType, fn);//IE5
return r;
}
else {
elm['on' evType] = fn;//DOM 0
}

}

HTML5工作組的版本： 複製代碼

代碼如下:


var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){
if(el.length){
for(var i=0;iaddEvent(el[i],type,fn);
}
}else{
el.addEventListener(type, fn,false);
}
};
}else{
return function(el,type,fn){
if(el.length){
for(var i =0;iaddEvent(el[i],type,fn);
}
}else{
el.attachEvent('on' type,function (){
return fn.call(el,window.event);
});
}
};
}

})();

方法三、事件= 函數

例：obj.onclick = Foo;

這種綁定事件的方式，兼容主流瀏覽器,但如果一個元素上添加多次同事件呢? 複製程式碼

程式碼如下:


obj.onclicklick=objod.onclicklick 🎜>obj.onclick=method2;
obj.onclick=method3;

如果這樣寫,那麼只有最後綁定的事件,這裡是method3會被執行,此時應該用方法二的方法進行事件的綁定

區別IE6、IE7、IE8之間的方法：

複製代碼

程式碼如下:

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&!window.XMLHttpRequest;
var isIE8=isIE&!window.XMLHttpRequest;
var isIE8=isIE&!&!t! var isIE7=isIE&&!isIE6&&!isIE8;
if (isIE){
　　if (isIE6){
　　　　alert(”ie6″);
　　　　alert(”ie6″);
　　　　alert(”ie6″);
　　　　alert(”ie6″);
　　　　alert("ie6″); ( ”ie8″);
　　}else if (isIE7){

　　　　alert(”ie7″); 　　} } 　　} }