関連する読み物:
javascriptイベント学習概要(v)JSのマウスイベントタイプ
//www.vevb.com/article/86259.htm
JavaScriptイベント学習概要(i)イベントフロー
//www.vevb.com/article/86261.htm
JavaScriptイベント学習概要(iv)イベントのパブリックメンバー(プロパティと方法)
//www.vevb.com/article/86262.htm
JavaScriptイベント学習概要(ii)JSイベントハンドラー
//www.vevb.com/article/86264.htm
JavaScriptイベント学習概要(iii)JSイベントオブジェクト
1。イベントオブジェクトのパブリックメンバー
1。Domのイベントのパブリックメンバー
イベントオブジェクトには、作成した特定のイベントに関連するプロパティとメソッドが含まれています。トリガーされるイベントの種類は異なり、利用可能なプロパティとメソッドは異なります。ただし、DOMのすべてのイベントには、次のパブリックメンバーがいます。
a。 CurrentTargetとターゲットの比較
イベントハンドラーの内部では、オブジェクトが常にCurrentTargetの値に等しく、ターゲットにはイベントの実際のターゲットが含まれています。
たとえば、ページにボタンがあり、ボディのクリックイベント(ボタンの親ノード)を登録します。ボタンがクリックされると、クリックイベントが処理のためにボディに泡立ちます。
<Body> <入力ID = "BTN" TYPE = "BUTTON" VALUE = "CLICK"/> <script> document.body.onclick = function(event){console.log( "ボディに登録されているイベントをクリックします"); console.log( "this === event.currentTarget?"+(this === event.currentTarget)); // true Console.log( "currentTarget === document.body?"+(event.currentTarget === document.body)); // true console.log( 'event.target === document.getElementById( "btn")?'+(event.target === document.getElementbyId( "btn"))); // true} </script> </body>実行中の結果は次のとおりです。
b。型属性を介して、複数のイベントを関数で処理できます。
原則:イベントを検出することにより、さまざまなイベントが異なる方法で処理されます。
例:クリック、マウスオーバー、マウスアウトの3種類のイベントを処理するハンドラー関数を定義します。
<Body> <入力ID = "BTN" type = "Button" value = "Click"/> <script> var handler = function(event){switch(event.type){case "click":alert( "clicked");壊す;ケース「マウスオーバー」:event.target.style.backgroundcolor = "pink";壊す;ケース "Mouseout":event.target.style.backgroundColor = ""; }}; var btn = document.getElementById( "btn"); btn.onclick =ハンドラー; btn.onmouseover =ハンドラー; btn.onmouseout = handler; </script> </body>効果を実行する:ボタンをクリックすると、ボックスがポップアップします。マウスがボタンを通過すると、ボタンの背景色がピンクになります。マウスがボタンを離れると、背景色がデフォルトに戻ります。
c。 stoppropagation()とstopimmediatepropagation()の比較
同じ:StopPropagation()およびStopimMediatePropagation()を使用して、イベントのさらなるキャプチャまたはバブルをキャンセルできます。
異なる:2つの違いは、イベントに複数のイベントハンドラーがある場合、stopimmediatepropagation()がイベントハンドラーが後で呼び出されるのを防ぐことができるということです。
例えば:
<Body> <入力ID = "BTN" TYPE = "BUTTON" VALUE = "CLICK"/> <script> var btn = document.getElementById( "btn"); btn.addeventlistener( "click"、function(event){console.log( "buttn click reathed ons"); // event.stoppropagation(); // comment viewing effect // event.stopimmediatepropagation(); // uncomment viewing effect}、fals); btn.addeventlistener( "click"、function(){console.log( "button click listened");}、false); document.body.onclick = function(event){console.log( "body clicked"); } </script> </body>ランニング効果:
D、イベント値
イベント値は、キャプチャフェーズで1、ターゲットフェーズで2、バブルフェーズで3です。
例:
<Body> <入力ID = "BTN" type = "Button" value = "Click"/> <script> var btn = document.getelementbyid( "btn"); btn.onclick = function(event){console.log( "ボタンdom0レベルのメソッドイベントハンドラーイベント値を追加"+event.eventphase);} btn.addeventlistener(" click "、function(event){console.log(" button dom2-levelメソッドはイベントハンドラーを追加し、イベント値は "+event.eventphase);};}、true);イベントハンドラーを追加すると、イベント値は「+event.EventPhase);}、false)です。 document.body.addeventlistener( "click"、function(event){console.log( "ボディはイベントハンドラーを追加し、イベント値は"+event.eventphase);}、true); document.body.addeventlistener( "click"、function(event){console.log( "body adds eventphase handler and neventhase and and hander and hander and and hander "+event.EventPhase);}、false); </script>ランニング効果:
2。IEのイベントのパブリックメンバー
IEのイベントのプロパティと方法はイベントタイプごとに異なりますが、一部はすべてのオブジェクトが持っているパブリックメンバーであり、これらのメンバーのほとんどは対応するDOMプロパティまたは方法を持っています。
上記は、編集者があなたに紹介したイベント(IV)のパブリックメンバー(属性と方法)の関連する知識であり、私はそれがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください!