JavaScriptにおけるイベント指定処理手順の5つの方法について分析する.

5455 ワード
本論文の例は、JavaScriptにおけるイベントのための処理手順を指定する5つの方法を示している.皆さんに参考にしてあげます.具体的には以下の通りです.
JavaScriptとHTMLの相互作用はイベントを通じて実現される.
IE 9、Firefox、Opera、Sarifi、ChromeはすでにDOM 2級のイベントモジュールの核心部分を実現しました.
イベントフロー:
イベントフローは、ページからイベントを受け取る順序を記述しているが、IEとNetscapeは、全く逆のイベントフローの概念を提示しており、IEのイベントフローは、イベントバーストストリームであり、Netscapeのイベントフローは、イベントトラッピングストリームである.
1)事件の泡が立つ
イベント開始時には、最も具体的な要素(ドキュメント内のネストレベルの一番深いノードによって受信され、より具体的でないノード(ドキュメント)に階層的に伝播される.
事件の泡沫事件に対応していません.blur、focus、ロード、unload.
2)イベントキャプチャ
具体的ではないノードは、イベントをより早く受信するべきであり、最も具体的なノードは、最後にイベントを受信するべきである.イベントキャプチャの意図は、イベントが所定の目標に達する前に獲得することである.
IE 9、Safari、Chrome、Firefox、Operaはすべてイベントのキャプチャとイベントの泡立ちをサポートしていますが、IE 8およびそれより早いバージョンはイベントの泡立ちだけをサポートしています.イベントの泡立ちはサポートされていません.特別な必要がある時にイベントキャプチャを使用することを提案します.
DOMイベントフロー:
DOM 2レベルイベントで規定されているイベントフローは、3つの段階が含まれています.イベントトラッピング段階では、ターゲットとなるイベントが発生しないように設定されています.実際には、イベントトラッピング段階では、ターゲットとなるイベントが所定の目標段階で発生します.イベント処理では、ターゲットの段階では、イベントバブルの一部と見なされます.しかし、たとえ「DOM 2レベルイベント」であっても捕獲段階はイベントターゲットに関係しないことを規定で明確に要求しているが、IE 9、Safari、Chrome、Firefox、Opera 9.5およびより高いバージョンはいずれも獲得段階においてイベントオブジェクトをトリガするものであり、結果としてターゲットオブジェクト上でイベントを操作する機会は2つある.
IE 9、Firefox、Opera、Sarifi、ChromeはいずれもDOMイベントフローをサポートしており、IE 8およびそのより早いバージョンはDOMイベントフローをサポートしていない.
イベントハンドラ:
イベントは、ユーザまたはブラウザ自身が実行するある動作であり、あるイベントに応答する関数はイベントハンドラ(またはイベントリスタ)であり、イベントハンドラの名前は「on」で始まる.
JavaScriptには5つのイベント処理プログラムがあります.
1)HTMLイベントハンドラ
各イベントは、対応するイベントハンドラと同名のHTML特性を使用して指定することができます.特性の値は実行可能なJavaScriptコードであってもよく、関数であってもいいです.関数の一部変数eventがあります.イベントオブジェクトにはイベント変数でアクセスできます.函数内部では、イベントのターゲット要素に相当する値があります.
HTMLでイベントハンドラのいくつかの欠点を指定します.
①時差問題:ユーザはHTML要素がページ上に現れると該当イベントをトリガする可能性がありますが、当時のイベントハンドラはまだ実行条件を備えていない可能性があります.例えば、ユーザがイベントハンドラを解析する前にイベントをトリガします.そのために、多くのHTMLイベントハンドラは一つのtry-catchブロックにカプセル化されています.エラーを逃さないようにします.戸に見られる
②イベントハンドラのスコープの拡張は、ブラウザによって異なる結果をもたらすことがあります.JavaScriptエンジンによる識別子解析ルールによっては多少の違いがあり、限定対象外のメンバーへのアクセス時にエラーが発生する可能性があります.
③HTMLコードはJavaScriptコードと密接に結合されており、イベントハンドラを変更するにはHTMLコードとJavaScriptコードを変更する必要があります.
2)DOM 0級イベントハンドラ
JavaScriptでイベントハンドラを指定する従来の方法では、一つの関数をイベントハンドラの属性に割り当てます.DOM 0級の方法で指定されたイベントハンドラは要素として認識されていますので、thisは現在の要素を参照します.
DOM 0レベルのイベントハンドラのメリット:
①簡単
②ブラウザをまたぐ
イベントハンドラの値をnullに設定することで、DOM 0レベルで指定されたイベントハンドラを削除することができます.
3)DOM 2級イベントハンドラ
DOM 2レベルイベントは、イベントハンドラを指定して削除するための2つの方法を定義しています.addEventListener()およびremoveEventListener()は、いずれも3つのパラメータを受信します.処理するイベント名、イベントハンドラの関数、および1つのブール値(trueは、キャプチャフェーズでイベントハンドラを起動し、falseは、バブル段階でイベントハンドラを起動することを表しています.).
DOM 2級イベントハンドラのメリット:
追加された順序でトリガされる複数のイベントハンドラを追加することができます.addEventListener()によって追加されたイベントハンドラはremoveEventListener()でしか除去できないが、着脱時に入ってきたパラメータはイベントハンドラを追加する時に使用したパラメータと同じであるため、addEventListener()によって追加された匿名関数は除去できなくなり、removeEventListener()にaddEventListener()に名前が入ってきた関数が正常に除去される必要がある.
4)IEイベントハンドラ
IEイベントは、2つの方法を定義している.attachEvent()およびdetachEvent()は、いずれも2つのパラメータを受信する.処理するイベント名、イベントハンドラの関数として.IE 8およびそれより早いバージョンは、イベントバブルのみをサポートするので、atachEvent()を介して追加されるイベントハンドラは、バブル段階に追加される.
注意:IEのattachEvent()によって追加されたイベントハンドラの名前は「on」で始まり、DOMのaddEventListener()によって追加された名前はそうではない.
IEにおいてattachEvent()を使用することと、DOM 0レベルの方法を使用することとの主な違い:
イベントハンドラの役割領域が異なります.IEではatachEvent()を使って、イベントハンドラはグローバルスコープで実行されますので、thisはwindowに等しいです.DOM 0レベルの方法を使って、イベントハンドラはその属する元素の作用領域で実行されます.
IEでattachEvent()を使用することと、DOM 2レベルの方法を使用することとの違い:
複数のイベントハンドラを追加する実行順序は違っています.IEでは、atachEvent()を使用して、それらを追加する逆の順序でトリガする複数のイベントハンドラを追加することができます.DOMではaddEventListener()を使用して、複数のイベントハンドラを追加することができますが、それらを追加する順序でトリガされます.attachEvent()によって追加されたイベントハンドラはdetachEvent()でしか除去できないが、着脱時に入ってきたパラメータはイベントハンドラを追加する時に使用したパラメータと同じであるため、attachEvent()によって追加された匿名関数は除去できなくなり、detachEvent()にattachEvent()に名前が入ってきた関数が正常に除去される必要がある.
5)ブラウザをまたぐイベントハンドラ
イベントハンドラのコードがほとんどのブラウザで一致して実行されることを保証するには、泡が発生する段階に注意する必要があります.
場合によっては、DOM 2レベルの方法、IE方法、DOM 0レベルの方法を使用してイベントを追加および除去し、addHandler()およびremoveHandler()方法はEventUtilオブジェクトに属する.
①まず、入ってきた元素にDOM 2級の方法があるかどうかを検出する(入ってきた第三のパラメータはfalseで、発泡段階を表す);
②着信した要素にIEがあるかどうかを再検出する方法.
③最後に入力された要素がDOM 0レベルの方法があるかどうかを検出します(括弧文法を使用して、属性名をイベントハンドラに指定します).

var EventUtil = {
  addHandler:function(element, type, handler) {
    if (element.addEventListener)
      element.addEventListener(type, handler, false);
    else if (element.attachEvent)
      element.attachEvent("on" + type, handler);
    else
      element["on" + type] = handler;
  },
  removeHandler:function(element, type, handler) {
    if (element.removeEventListener)
      element.removeEventListener(type, handler, false);
    else if (element.detachEvent)
      element.detachEvent(“on” + type, handler);
    else
      element["on" + type] = null;
  }
}
PS:javascriptイベントについての説明は当駅javascriptイベントと機能説明大全を参照してください.http://tools.jb51.net/table/javascript_event
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます.「JavaScript事件関連操作と技巧大全」、「JavaScriptページ要素操作技術まとめ」、「JavaScript操作DOM技巧まとめ」、「JavaScript検索アルゴリズム技術まとめ」、「JavaScriptデータ構造とアルゴリズムのまとめ」、「JavaScriptアルゴリズムとテクニックの総括」及び「JavaScriptエラーとデバッグ技術の総括」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.
javascript言語の精粋.3、オブジェクト4、関数原型チェーンに深く入り込み、対象の原理!