JavaScript クロスブラウザ開発体験まとめ (5) js events_javascript スキル-jsチュートリアル-php.cn

JavaScript クロスブラウザ開発体験まとめ (5) js events_javascript スキル

WBOY

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

オリジナル

944 人が閲覧しました

単純なイベントモデルと高度なイベントモデル

単純なイベントモデルと高度なイベントモデルシンプルなイベントは、イベントが次のようなページ要素に直感的にバインドされる形式です。

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

element.onclick = function(){alert(this.innerHTML);}

個々のブラウザに固有のイベントを使用しない限り、一般的なクリック、マウスオーバーイベントなどは可能です。各ブラウザで利用するこのようにして利用することができます。

しかし、イベントが複数のリスナーをバインドする必要がある場合、またはリスナーを動的に登録/削除する必要がある場合、単純なイベントモデルでは十分ではなく、高度なイベントモデルを使用する必要があります (IE およびその他のブラウザーは高度なイベントモデルを使用します)違いがあります):

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

// Register
function addEventHandler(element, evtName, callback, useCapture) {
//DOM 標準
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture); } else {
//IE モード、useCapture パラメータを無視します
element.attachEvent('on' evtName, callback)
}
}

//
を削除します。 function deleteEventHandler( element, evtName, callback, useCapture) {
//DOM 標準
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture)
}; 🎜>/ /IE モード、useCapture パラメータを無視します
element.dettachEvent('on' evtName, callback)
}
}

onclick イベントとタグ内の href 属性の間の呼び出し順序の関係
タグが click イベントに応答するとき、最初に onclick イベントに応答します。次に、 href 内の Jump メソッドを実行します。たとえば、次のタグをクリックすると、「button」と「href」が連続して表示されます:

ただし、これはジャンプリンクのアドレスを定義する属性であるため、href には特定の JavaScript メソッドを定義しないことをお勧めします。 2 つの JavaScript メソッドを連続して使用すると、次のようになります:

;/a>

ただし、上記の書き方では、onclick バインディング応答メソッドが別のページにジャンプするリクエストを送信しない場合、現在の Web ページが更新されていることがわかります。上記のコードの ="#" は、現在のページの先頭にジャンプすることを意味しますが、新しい HTML リクエストは発行されません。場合によっては、onclick イベントに応答した後にページが先頭に戻ることを望まないことがあります (特に、ページの高さが長く、スクロールバーが表示され、リンクがページの下部にある場合、ユーザーは依然として必要があります)元の位置を取得して操作を継続する場合)、href で定義されたアクションの継続を防ぐために、onclick の後に false 値を返す必要があります。

< など;a href="#" onclick="alert(this.innerHTML );alert("href"); return false;">/a>ボタン

または # を空の JavaScript ステートメントに置き換えます:

ボタン

Onload イベント呼び出しシーケンス

ページの初期化中にページ要素の初期状態を設定するためにいくつかのスクリプトを呼び出す必要がある場合があります。最も標準的な方法は < を使用することです。 ;body onload=""> メソッドまたは document.onload メソッド。 onload イベントのトリガーは、ページ要素がレンダリングされた後に呼び出されます。これにより、スクリプトの実行時にレンダリングされていないページ要素が見つからなくなります。領域の<script>ブロック内でスクリプトを実行し、ページ要素を使用すると要素が見つからないエラーが発生する可能性があります。スクリプトが <body> エリアの <script> ブロックで実行される場合、<body> エリア内の要素は基本的に順次解析されるため、使用できます。 <br><br><BR><STRONG>onchange イベント <br><br> <input> 要素と <select> の <option> 要素は両方とも onchange イベントをサポートしています。 that 要素 content 値が変更されましたが、onchange イベントはトリガーされませんでした。これは、onchange イベントがトリガーされる別の条件があるためです。それは、現在の要素がフォーカスを失った状態 (onblur) にあるためです。したがって、onchange イベントは、ユーザー操作中の値の変更のみをキャプチャできます。JavaScript スクリプトを使用して要素の値が動的に変更される状況はキャプチャできません。 <br><br><STRONG>イベントインターセプト <br><br>IE 以外のブラウザは window.event を認識できないため、現在のイベントとイベントが発生するターゲット要素を取得するには次のメソッドを使用する必要があります: <BR>var evt = e?e:(window.event?window.event:null); <BR>var el = evt.srcElement?evt.srcElement:evt.target;<br><br>ここにいくつかありますその他の関連記事非常に参考になります<BR><A href="http://www.jb51.net/article/22014.htm" target=_blank>JavaScript イベント学習第 1 章イベントの紹介 <BR><A href="http://www.jb51.net/article/22763.htm" target=_blank>JavaScript クロスブラウザイベントシステム</script>