ホームページ > 記事 > ウェブフロントエンド > JavaScript クロスブラウザ開発体験まとめ (5) js events_javascript スキル
JavaScript クロスブラウザ開発体験まとめ (5) js events_javascript スキル
- WBOYオリジナル
- 2016-05-16 18:26:56923ブラウズ
単純なイベント モデルと高度なイベント モデル
単純なイベント モデルと高度なイベント モデル シンプルなイベントは、イベントが次のようなページ要素に直感的にバインドされる形式です。
個々のブラウザに固有のイベントを使用しない限り、一般的なクリック、マウスオーバー イベントなどは可能です。各ブラウザで利用する このようにして利用することができます。
しかし、イベントが複数のリスナーをバインドする必要がある場合、またはリスナーを動的に登録/削除する必要がある場合、単純なイベント モデルでは十分ではなく、高度なイベント モデルを使用する必要があります (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>
単純なイベント モデルと高度なイベント モデル シンプルなイベントは、イベントが次のようなページ要素に直感的にバインドされる形式です。
コードをコピー コードは次のとおりです:
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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。