関連する読み物:
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イベントオブジェクト
//www.vevb.com/article/86266.htm
1。イベントオブジェクト
1。イベントオブジェクトを理解します
イベントは、ブラウザにオブジェクトとして、つまりイベントとして存在します。イベントをトリガーすると、イベントに関連するすべての情報が含まれるイベントオブジェクトイベントが生成されます。イベントに至る要素、イベントの種類、および特定のイベントに関連するその他の情報が含まれます。
たとえば、マウス操作によって生成されたイベントには、マウスの位置に関する情報が含まれます。キーボード操作によって生成されたイベントには、押されたキーに関連する情報が含まれます。
すべてのブラウザはイベントオブジェクトをサポートしていますが、サポート方法は異なります。 DOMでは、イベントオブジェクトを一意のパラメーターとしてイベント処理機能に渡す必要があります。 IEでは、イベントはウィンドウオブジェクトの属性です。
2。HTMLイベントハンドラーでのイベント
<入力id = "btn" type = "button" value = "クリック" onclick = "console.log( 'html eventハンドラー'+event.type)"/>
これにより、ローカル変数イベントを含む関数が作成されます。イベントオブジェクトは、イベントから直接アクセスできます。
3。DOMのイベントオブジェクト
レベルDOM0およびレベルDOM2のイベントハンドラーは、パラメーターとしてイベントを渡します。
<Body> <入力ID = "BTN" type = "button" value = "Click"/> <script> var btn = document.getElementbyId( "btn"); btn.onclick = function(event){console.log( "dom0&click"); console.log(event.type); //click} btn.addeventlistener("click "、function(event){console.log(" dom2&click "); console.log(event.type); // click}、false); </scrip> </body>4。IEのイベントオブジェクト
最初のケース:DOM0レベルメソッドを介してイベントハンドラーを追加するとき、イベントオブジェクトはウィンドウオブジェクトの属性として存在します。
<Body> <入力ID = "BTN" type = "Button" value = "Click"/> <script> var btn = document.getElementById( "BTN"); //クリック} </script> </body>
2番目のケース:actiblevent()を介して追加されたイベントハンドラー、およびイベントオブジェクトはパラメーターとして渡されます。
<Body> <入力ID = "BTN" type = "button" value = "Click"/> <script> var btn = document.getElementById( "btn"); btn.attachevent( "onclick"、function(type){console.log(event.type); // click})</script/> </body>しかし、私は2つのことを理解していません。
1.イベントパラメーターは、Dom0レベルのメソッドを介して追加されたイベントハンドラーに渡すこともできます。そのタイプはwindow.event.typeと同じですが、渡されたイベントパラメーターはwindow.eventとは異なります。なぜ?
btn.onclick = function(event){var event1 = window.event; console.log( 'event1.type ='+event1.type); //event1.type = clickconsole.log('event.type = '+event.type); //event.type = clickconsole.log('event1= enevent?'+(event== event1)); // event1 == event?false}2。ActibleEventを介して追加されたイベントハンドラーで渡されたイベントは、Window.eventとは異なります。なぜ?
<Body> <入力ID = "BTN" type = "Button" value = "Click"/> <script> var btn = document.getElementById( "btn"); btn.attachevent( "onclick"、function(type){console.log(event.type); //clickConsole.log("Event==window.event?"+(event==window.event));上記は、編集者が紹介したJSイベントオブジェクトに関するJavaScriptイベント学習(III)関連知識の要約です。私はそれが誰にでも役立つことを願っています。もっと知りたい場合は、wulin.comのWebサイトに注意してください!