Javascript事件

10741 ワード
JavaScript イベント
埋め込みモード
      イベントは、要素に関連して属性として要素に追加されます.属性の形でHTML要素に属性を追加する方法は、インラインモードと呼ばれることがあります. model)またはインライン登録モードです.
たとえば:
＜body onload=「var」 i=23; i*=3; alert(i):'//直接にハンドルのJavascriptコードをここに書いてください.
＜body onload=「cacNumber()」//「より一般的なやり方で、関数を呼び出します.
短所:HTML要素にイベントを追加するには、Javascript関数名または挙動を変更する必要があります.指定されたイベントは、異なるページである関数をイベントのハンドルとして指定するため、各ページ、各要素を見つけて、手動でこれらの変更を完了する必要があります.行為と構造分離の原則にも合致しない.
 
従来のモード
DOM  レベル 0イベントハンドリング
       オブジェクト属性によって一つの関数をイベントのハンドルとして割り当てる方法を、従来のモードまたは従来の登録モードと呼びます.各オブジェクトの属性にアクセスするように、イベントのハンドルに直接アクセスします.すべてのブラウザで仕事ができます.
例:
window.onload = cacNumber;//windowオブジェクトのオンラインイベント属性に関数を割り当てます.
短所:方法の値を定義したら、後の定義はいずれも前に定義された値をカバーします.
たとえば:
x.onclick = ドThis
x.onclick = ドタタ
ユーザーがx要素をクリックすると、doThat()関数だけが実行されます.二つの方法を全部実行したいなら、こうしてもいいです.
x.onclick = function(){
ドThis();
ドタタ();
)
しかし、これは、関数がxオブジェクトとしての方法ではないので、ミスのオブジェクトを指すdoThis()とdoThat()にthisのキーワードをもたらします.
 
DOM レベル 2事件モデル
    W 3 Cの上位イベントハンドラ登録モデル、イベントキャプチャとイベント発泡エネルギーによりカバーされた問題を効果的に解決します.これらのモデルは同じ要素で同じイベントのために任意の数のイベントハンドラを定義することを可能にします.
W 3 Cモデル
x.addEvent Listener(‘click’、doThis、false);
x.addEvent Listener(‘click’、doThat、false);
最初のパラメータ:文字列形式のイベント名で、onプレフィックスがありません.
第二のパラメータ:実行される関数(括弧がないので、すぐに実行したくないです.イベントが発生した時だけ実行したいです.)
第3のパラメータ:ブール値は、イベントの泡かそれともイベントのキャプチャかを表します.(泡が出る場合が多い)
マイクロソフト
x.atachEvent(‘onclick’、doThis);
x.atachEvent(‘onclick’、doThat);
最初のパラメータ:文字列形式のイベント名
2番目のパラメータ:実行される関数
現在ユーザーが要素xをクリックすると、doThis()とdoThat()の両方が実行されます.でも、登録した順に実行するとは限りません.
イベントハンドラを削除
x.removeveEventListener(‘click’,doThis,false);W 3 C
x.detachEvent(‘onclick’、doThis)//MS
短所:一つの要素に登録されているイベントハンドラを見つけることができませんでした.これは「要素xからすべてのonclickイベントハンドラを取り除くことができない」という意味です.従来のモードでは、x.onclickが可能です. = null
最適な方法
    私は伝統的なモデルを使う傾向があります.それは簡単で、ブラウザを完全に跨るので、いつも正しいキーワードで作業できます.もちろん使わないこともありますが、その場合はaddEventListenerを使います.
    ページ内のすべてのスクリプトが完全にコントロールされると、伝統的なモデルを使います.他のスクリプトの介入がないので、伝統モデルを安全に使用することができます.
複数のスクリプトが同じページに共存するときは、addEventListenerを使います.
(ppkより抜粋 オン Javascript)
 
W 3 Cとマイクロソフトモデルの違い
1. マイクロソフトモデルはイベントキャプチャをサポートしていません.大きな問題ではなく、イベントの捕獲は少ないです.
2. マイクロソフトのモデルは、登録されたHTML要素の代わりに、イベント処理関数を大域関数として扱う方法です.深刻な問題です.
二つ目の違いのために、Eventオブジェクトのtargetやsrcellmentなどの属性を使ってターゲットを見つけます.(個人的な観点)
 
イベント Object
英語で書いたのは、中国語の「Event対象」や「イベント対象」ではなく、私が見つけたからです.
HTML DOM イベントオブジェクトページhttp://www.w3school.com.cn/htmldom/dom_OBevent.asp
と対応する英語ページHTML DOM イベント http://www.w3schools.com/jsref/dom_OBevent.asp
二つのページの知識点の数は同じです.中国語の翻訳による問題だと思います.前者のページのEvent関連の内容は分かりにくいです.
まずページのタイトルから言えば、後者のEventsは「s」をつけています. DOM 事件という意味ですが、中国語では翻訳できません.この章にはHTMLがあります. DOM イベント Eventsマウスイベント、Keyboard Eventsキーボードイベントなど、これらのイベントには「s」が追加されています.またイベントもあります Object、すなわち「イベントオブジェクト」には、いくつかの方法と属性とイベントがあります.第二のウェブサイトを見ることを勧めて、事件と対象の分類に対してはっきりしていて分かりやすいです.
 
イベントオブジェクトの取得
W 3 Cモデルでは、イベントオブジェクトは、最初のパラメータとして現在のイベントハンドラに渡される.MSモデルでは、イベントオブジェクトは常にwindow.eventである.
この互換性の問題は1行のコードで解決できます.例えば:
document.addEvent Listener(‘click’,handleEvent,false);
document.atachEvent(‘onclick’,handleEvent);
機能 handleEvent(e){
var evt = e || window.event.//一つの3元の操作符も使えます.
)
 
ターゲットを見つける
イベントが発生すると、通常はイベントを発生する要素を操作したいです.このようにするには、まずこの元素を見つけます.
ターゲットオブジェクトの属性を見つけるために重要な二つがあります.一つ目は、イベントオブジェクトのW 3 CのtargetまたはMSのsrcellment属性であり、それらは常にイベントを発生する要素を指す.二つ目はthisのキーワードです.一般的には(しかし、いつも)イベントマネージャを定義する要素を指しています.
機能 handleEvent(){
var evt = e || window.イベント;
var evtTarget = evt.target || evt.srcele ment
)
実は、イベントの対象はJavascriptです. 二次DOMイベントモデルのコアは、このモデルがEventオブジェクトをめぐっていくつかの列動作を行う.モニターの追加——>イベントオブジェクトの取得——>Eventオブジェクトの操作方法や属性、その他の動作(－>モニタのキャンセル)など.
 
W 3 Cモデル
W 3 Cモデルでは捕獲と発泡はいずれも発生する.イベントがトリガされると、ドキュメントに最初に捕獲され、文書ツリーに沿って下に移動し、イベントのターゲットを知るまでをキャプチャフェーズといいます.事件がその目標に達すると、泡が噴き始める.この過程では、事件は元の道の反対方向に沿って上へ巡り、文書を知るまでになる.
 
イベントキャプチャとバースト
例:

   
   
   
   
    
    
    
    
    
  1. <script type="text/javascript"> 
    2. 
    
    
    
    
  2. function setup() { 
    3. 
    
    
    
    
  3. //     
    4. 
    
    
    
    
  4. 　　　  document.addEventListener('click',cascadeDown,true); 
    5. 
    
    
    
    
  5. 　　　  document.forms[0].addEventListener('click',cascadeDown,true); 
    6. 
    
    
    
    
  6. 　　　  document.forms[0].elements[0].addEventListener('click',cascadeDown,true); 
    7. 
    
    
    
    
  7. //     
    8. 
    
    
    
    
  8.     document.addEventListener("click",bubbleUp,false); 
    9. 
    
    
    
    
  9.     document.forms[0].addEventListener("click",bubbleUp,false); 
    10. 
    
    
    
    
  10.     document.forms[0].elements[0].addEventListener("click",bubbleUp,false); 
    11. 
    
    
    
    
  11. } 
    12. 
    
    
    
    
  12. function cascadeDown(evnt){ 
    13. 
    
    
    
    
  13. 　　　alert("Capturing: " + this); 
    14. 
    
    
    
    
  14. } 
    15. 
    
    
    
    
  15. function bubbleUp(evnt){ 
    16. 
    
    
    
    
  16. 　　　alert("Bubbling: " + this); 
    17. 
    
    
    
    
  17. } 
    18. 
    
    
    
    
  18. window.onload = setup; 
    19. 
    
    
    
    
  19. </script> 
    20. 
    
    
    
    
  20. <body> 
    21. 
    
    
    
    
  21. <form style="background-color:#f00; width:100px; height:100px; padding:10px" action=""> 
    22. 
    
    
    
    
  22. 　　　<p> 
    23. 
    
    
    
    
  23. 　　　 <input type="submit" value="Submit" /><br /> 
    24. 
    
    
    
    
  24. 　　　</p> 
    25. 
    
    
    
    
  25. </form> 
    26. 
    
    
    
    
  26.  </body> 
    27.
以下のメッセージを順次表示します.
Capturing: [object] HTMLDocument]
Capturing: [object] HTMLForm]
Capturing: [object] HTMLInputElement]
Bbbbling: [object] HTMLInputElement]
Bbbbling: [object] HTMLFormElement]
Bbbbling: [object] HTMLDocument]
    Submitボタンをクリックすると、イベントはドキュメントのレベル1から開始し、フォームドメインボタンに下へ移動します.この過程で、document、フォーム、およびボタンを提出するイベントのハンドルを順次呼び出します.そして、イベントは泡が発生した段階に入り、ドキュメントのレベル1に進み、ボタン、フォーム、document要素を提出するイベントのハンドルを相次いで呼び出します.
従来のモデルとマイクロソフトモデルは、イベントの発泡だけをサポートしており、イベントの捕捉をサポートしていません.
 
イベントの泡出しメカニズムをキャンセルします.

   
   
   
   
    
    
    
    
    
  1. document.getElementById(“first”).onmousedown = function(evnt){ 
    2. 
    
    
    
    
  2. var theEvent = evnt ? evnt : window.event; 
    3. 
    
    
    
    
  3. alert(“first element event”); 
    4. 
    
    
    
    
  4. stopEvent(theEvent); 
    5. 
    
    
    
    
  5. } 
    6. 
    
    
    
    
  6. function stopEvent(evnt){ 
    7. 
    
    
    
    
  7. if(evnt.stopPropagation){ 
    8. 
    
    
    
    
  8. evnt.stopPropagation(); 
    9. 
    
    
    
    
  9. }else{//IE 
    10. 
    
    
    
    
  10. evnt.cancelBubble = true; 
    11. 
    
    
    
    
  11. } 
    12. 
    
    
    
    
  12. } 
    13.
    上記の例では、最外層div要素に対するclickイベントのハンドルの呼び出しを終了し、前の2つのalertダイアログが依然として表示されます.しかし、最後のdocumentイベントに対するalertダイアログは、スタックの一番上に到達する前にイベントがキャンセルされたため、表示されません.
 
 
事件の核心とthis
    上記の例では、プログラムはOloadイベントのハンドルを通じてページのロードが完了した時にcalcNumber関数を呼び出して、トリガされたイベントはloadで、ブラウザのwindowオブジェクトと関連しています.事件のハンドルはフックともいう.carcNumberはイベントのハンドル関数と言います.
    thisキーワードは、現在呼び出されている関数または方法の所有者を表します.全体関数としては、windowオブジェクトを表しています.オブジェクトの方法では、オブジェクトのインスタンスを表しています.一つのイベントのハンドルには、そのイベントを受信した要素を表しています.
例えば、最初のdiv元素のonclickイベントのハンドル関数に現れたthisはdiv元素そのものを指す.
  

   
   
   
   
    
    
    
    
    
  1. document.getElementById(“first”).onmousedown = function(){ 
    2. 
    
    
    
    
  2. alert(this);//  “[object HTMLDivElement]” 
    3. 
    
    
    
    
  3. } 
    4. 
    
    
    
    
  4. x.onclick = function(){ 
    5. 
    
    
    
    
  5. test(); 
    6. 
    
    
    
    
  6. } 
    7. 
    
    
    
    
  7. function test(){ 
    8. 
    
    
    
    
  8. this.style.backgroundColor = ‘#cc0000’; 
    9. 
    
    
    
    
  9. } 
    10.
この場合のtest関数は全体のオブジェクトで呼び出されるので、thisは全体のオブジェクトwindowに対する参照を指す.
nginxのメモリ管理