JS_javascript スキルにイベントを動的に追加する複数のメソッド

メソッド 1、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');"); 🎜>ただし、IE では、オブジェクト属性、コレクション属性、イベント属性などの特定の属性を設定するための setAttribute の使用はサポートされていません。つまり、setAttribute を使用して style、onclick、および onmouseover 属性を設定することは機能しません。


方法 2、attachEvent と addEventListener を使用します IE は、attachEvent、object.attachEvent(event, function) をサポートします。例:

コードをコピーします コードは次のとおりです。

obj.attachEvent("onclick", Foo)
function Foo()
{
alert("Test");
}

または obj.attachEvent("onclick", function(){alert("Test");}); >その他のブラウザは addEventListener、element.addEventListener(type,listener,useCapture,

コードをコピー コードは次のとおりです:

obj.addEventListener("click", Foo, false);

function Foo()
{
alert("test"); >
同じことも一緒に書くことができます obj.addEventListener("click", function(){alert("test");}, false);
attachEvent イベントには onclick などがあることに注意してください。 addEventListener には click などの機能がありません。

コードをコピーします

コードは次のとおりです: 互換性を考慮します: if (window.attachEvent )//IE と互換性があります {

//IE のイベントコード

}
else
{
//他のブラウザのイベント コード
}


上記のイベントを追加する方法は 2 つあり、同じイベント追加方法を使用するには、一般的なイベント追加関数を書き直す必要があります。 >
バージョン 1:

コードをコピーします

コードは次のとおりです: function addEvent (elm, evType, fn, useCapture) { if (elm.addEventListener ) { elm.addEventListener(evType, fn, useCapture);//DOM2.0 return

}

else if (elm.attachEvent) {
var r = elm.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);
}); >};
}
})();



メソッド 3、イベント = 関数

例: obj.onclick = Foo;イベントをバインドするこの方法は主流のブラウザと互換性がありますが、同じイベントを複数追加する場合はどうすればよいですか?




コードをコピーします。
obj.onclick=method1; obj.onclick=method3;


のように書くと、最後にバインドされたイベントのみ。ここではメソッド 3 が実行され、この時点でメソッドを使用する必要があります。 イベント バインディングの 2 つのメソッド

IE6、IE7、IE8 でメソッドを区別します: コードをコピー

コードは次のとおりです:


var isIE=!!window.ActiveXObject

var isIE6=isIE&&! window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if (isIE6){
”ie6″); ”ie8″);

}else if (isIE7){ alert(”ie7″);