Javascript Event_javascript スキルにおける IE と標準 DOM の比較-jsチュートリアル-php.cn

Javascript Event_javascript スキルにおける IE と標準 DOM の比較

WBOY

リリース： 2016-05-16 18:28:56

オリジナル

1186 人が閲覧しました

1. イベントストリームの違い

IE はバブリングイベントを使用 Netscape はキャプチャイベントを使用 DOM は最初にバブリングイベントをキャプチャしてから使用します
例:

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

をクリックします。ここでは

バブルイベントモデル: button->div-> )

キャプチャイベントモデル: body->div->button (Netscape イベントフロー)

DOM イベントモデル: body->div->button->gt ;button->gt ;div->body (最初にキャプチャしてからバブル)

2. イベントリスニング関数の違い

IE の使用:
[ Object].attachEvent ("name_of_event_handler", fnHandler); //バインディング関数
[Object].detachEvent("name_of_event_handler", fnHandler); //バインディングを削除します

DOM の使用法:
[Object].addEventListener( "name_of_event", fnHandler, bCapture); //バインディング関数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //バインディングを削除します

bCapture パラメータはステージを設定するために使用されますイベントバインディングの、true はキャプチャステージ、false はバブリングステージです。

サンプルコード:

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

 
 function addEventHandler( object,eventType, fnHandler){ 
if(object.addEventListener){ //DOM 
object.addEventListener(eventType, fnHandler, false)
}else if(object.attachEvent){ / /IE 
object.attachEvent("on"eventType, fnHandler); 
}else{ //その他 
object["on"eventType]=fnHandler; function removeEventHandler( object,eventType, fnHandler){ 
if(object.removeEventListener){ //DOM 
object.removeEventListener(eventType, fnHandler, false){ // /IE 
object.detachEvent("on"eventType, fnHandler); 
}else{ //その他 
object["on"eventType]=null; addEventHandler(oDiv ,"click",function(){alert("clicked")}); 

 


3. イベントオブジェクトの配置(取得) 
 
 
 IE: イベント オブジェクトはウィンドウ オブジェクトの属性イベントです。イベント処理関数が実行された後、イベント オブジェクトは破棄されます。 

例:

コードをコピー

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

document .onclick= function(){ alert(window.event.type); }

DOM: イベントオブジェクトは唯一のパラメーターとしてイベントハンドラーに渡される必要があります。最初のパラメータになります。

例:

コードをコピー

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

document .onclick= function(){ alert(arguments[0].type); }

4. ターゲット (target) を取得します。 
IE :var oTarget=oEvent.srcElement; 
DOM: var oTarget=oEvent.target; 


5. ブロック イベントのデフォルト動作 

oEvent.returnValue= false; DOM: oEvent.preventDefault();

例:

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

//Web ページの右クリックメニューをブロックします
document.body.oncontextmenu=function(oEvent){
if(document.all ){

oEvent=window.event; oEvent.returnValue=false; }else{ oEvent.preventDefault() }

6. イベントのコピーを停止します (バブル) 

IE: oEvent.cancelBubble=true; 
DOM: 

例: 

コードをコピー

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

button.onclick=function(oEvent ){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{

oEvent.stopPropagation(); }
コードテストウィンドウを添付します: (このメソッドの方がalert()よりも優れている場合があると感じます)