js事件解析

7524 ワード

js事件解析

以下はJavaScriptのイベントについてのまとめです.その後は更新され、JavaScriptの対応する枠組みの中のイベントを分析します.
JavaScriptには三つのイベントモデルがあります.
一、元のイベントモデル(0レベルDOMモデル):イベントに応答するときに呼び出すイベントのハンドル名.

イベントタイプの分類:
    1、意味によって分けられています.
     a)「元のイベント」および「入力イベント」:これらのイベントは、ユーザがマウスやキーボードに対して操作するもので、ユーザの操作だけを説明するもので、他の意味はありません.
     b)「意味的イベント」:これらの高級イベントは特定の環境において発生します.例えば、ユーザーがボタンを押すと、onmousedown、onmouseup、onclickが発生します.マウスをクリックした結果、ワンストップイベントが発生します.

     2、設備関係と設備の関係によって分けられます.
     a)デバイス関連(マウスとキーボード)のイベント:名前にはmouseとkeyが付いています.
     b)設備と関係のないイベント:onsubmitなど.
2級DOMにおける高級モデル(IE以外のすべてのブラウザがサポートしている):
1,イベントの伝播:
レベル0のイベントモデルでは、ドキュメント要素に対応するイベントが発生した場合、対応するハンドルを実行します.これ以外は、他の操作を実行しません.でも、2級事件のモデルの中では複雑です.
のほうが多いです.ステップは以下の通りです
1)キャプチャ段階では、イベントはDockmentオブジェクトからドキュメントツリーに沿って下に移動します.ターゲット要素の任意の祖先がイベントのハンドルをキャプチャするために登録されている場合、イベントの普及過程では、これらを実行します.
ハンドル
2)運用目標に登録された適切なイベントのハンドルは、0級イベントモデルと同じです.
3)泡立ち段階:目標要素からイベントがDockmentオブジェクトに戻る.一般的には、原始的なイベントは泡が立ち、高級な意味イベントは泡が立ちません.
イベントの伝播過程では、EventのstopPropagationを呼び出して次のステップの伝播を停止させることができます.
この時間伝搬方式は複雑に見えるが、イベント処理コードの中心化を助けることができる.
2,イベントハンドルの登録
オブジェクトのaddEventListenerを呼び出すことにより、form要素の提出のためにハンドルを追加するように、特定の要素にピリオドを追加することができます.
document.myform.addEvent Listener("submit"は、function(e)、false)
この関数の最初のパラメータはイベントタイプです.二つ目のパラメータはハンドル関数です.最後のパラメータはブールタイプで、trueであれば、イベントをキャプチャするために指定されたイベントのハンドルはイベント伝搬のキャプチャ段階で使用される.
FALSEであれば、イベントは通常のものであり、イベントがこの要素上に発生するか、または要素の子供が上に泡を発生させると、イベントシンタックスがトリガされる.
例:



    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<META NAME="Generator" CONTENT="EditPlus">  
<META NAME="Author" CONTENT="">  
<META NAME="Keywords" CONTENT="">  
<META NAME="Description" CONTENT="">  
<script language="javascript">  
  
function init(){   
       
    if(window.Event){   
             document.getElementById("d1").addEventListener("click",f1,false);   
  
             document.getElementById("d1").addEventListener("click",f3,false);   
       
    }else{   
            document.getElementById("d1").attachEvent("onclick",f1);   
            document.getElementById("d1").attachEvent("onclick",f3);   
    }   
       
  
    //document.getElementById("d3").addEventListener("click",f3,true);   
  
    //document.getElementById("d1").addEventListener("click",function(){alert("e2")},false);   
  
    //document.getElementById("b").addEventListener("click",function(){document.getElementById("d1").removeEventListener("click",f1,false)},false);   
// document.getElementById("d1").onclick = f1;   
}   
  
function f1(e){   
//alert(this.innerHTML);   
    //alert(e.currentTarget.innerHTML);   
    //alert(e.BUBBLING_PHASE+":"+e.CAPTURING_PHASE+":"+e.AT_TARGET);   
    //e.stopPropagation();   
alert(e.detail)   
    alert(e.type+(e.target==e.currentTarget)+":"+e.eventPhase+":"+e.bubbles);   
}   
  
function f2(){   
    alert(22)   
}   
  
function f3(){   
    alert(33)   
}   
  
function f4(){   
    alert(44)   
}   
</script>  
</HEAD>  
  
<BODY  onload="init()">  
<script language="javascript">  
  
  
</script>  
<div  id="d3" style="width:400px;height:400px;background-color:red">  
<div  id="d1" style="width:300px;height:300px;background-color:yellow" onclick="f4()">  
    <div id="d2" style="width:200px;height:200px;background-color:blue">  
                            div   
  
    </div>  
</div>  
</div>  
<input id="b" type="button" value="button"/>  
</BODY>  
</HTML>  

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">

function init(){
	
	if(window.Event){
			 document.getElementById("d1").addEventListener("click",f1,false);

			 document.getElementById("d1").addEventListener("click",f3,false);
	
	}else{
			document.getElementById("d1").attachEvent("onclick",f1);
			document.getElementById("d1").attachEvent("onclick",f3);
	}
	

	//document.getElementById("d3").addEventListener("click",f3,true);

	//document.getElementById("d1").addEventListener("click",function(){alert("e2")},false);

	//document.getElementById("b").addEventListener("click",function(){document.getElementById("d1").removeEventListener("click",f1,false)},false);
// document.getElementById("d1").onclick = f1;
}

function f1(e){
//alert(this.innerHTML);
	//alert(e.currentTarget.innerHTML);
	//alert(e.BUBBLING_PHASE+":"+e.CAPTURING_PHASE+":"+e.AT_TARGET);
	//e.stopPropagation();
alert(e.detail)
	alert(e.type+(e.target==e.currentTarget)+":"+e.eventPhase+":"+e.bubbles);
}

function f2(){
	alert(22)
}

function f3(){
	alert(33)
}

function f4(){
	alert(44)
}
</script>
</HEAD>

<BODY  onload="init()">
<script language="javascript">


</script>
<div  id="d3" style="width:400px;height:400px;background-color:red">
<div  id="d1" style="width:300px;height:300px;background-color:yellow" onclick="f4()">
	<div id="d2" style="width:200px;height:200px;background-color:blue">
							div

	</div>
</div>
</div>
<input id="b" type="button" value="button"/>
</BODY>
</HTML>

三:IEイベントモデル
このモデルはレベル0とレベル2の間のモデルであり、DOMモデルにおける捕捉形式のイベント伝搬をサポートしない.
1,IEイベントオブジェクト
IEにおけるEventオブジェクトと2級DOMモデルの違いは、IEのEventオブジェクトはwindowの属性であり、グローバルオブジェクトである.2レベルのDOMモデルではイベントのハンドルに転送され、かなりローカル変数になります.
2,IE中のイベントの泡が立ちます.
2レベルのイベントモデルにおける泡立ち方式と同様に、泡立ちを停止する方法に違いがある.
window.event.cnce Bubble=true;
2級モデルの中にはevent.stopPropopopopopop Propgation()があります.
3、イベントのハンドルを登録する方式
document.myform.atachEvent("onsubmit",function(e){}
二次モデルと比較して,二次モデルのイベント名よりも多くのonが存在し,発泡を支持しない.

Javascriptの中かっこ「[]」の多義性