イベントエージェントのまとめ:jQuery、Prototype、Yahooなど、主流クラスライブラリを使用するイベントエージェントの例がいくつかあります.UI.クラスライブラリを使わない例、例えばUsable Type blogの1つを見つけることもできます.必要に応じて、イベントエージェントはツールボックスの適切なツールであり、簡単に実現できます.
3640 ワード
ウェブページにJavaScriptのインタラクティビティを追加したい場合は、JavaScriptのイベントエージェント(event delegation)を聞いたことがあるかもしれませんが、これは熱狂的な友达レベルのJavaScriptプログラマーが関心を持っているどんな難解な設計モデルの一つだと思います.実際、JavaScriptのイベントプロセッサ(event handler)を追加する方法を知っていれば、イベントエージェントを実現するのも簡単です.
JavaScriptイベントは、すべてのWebページのインタラクティブ性の基礎です(CSSドロップダウンメニューだけでなく、真のインタラクティブ性を指します).従来のイベント処理では、必要に応じて各要素にイベントプロセッサを追加または削除します.しかし、イベント・プロセッサはメモリの漏洩やパフォーマンスの低下を引き起こす可能性があります.このリスクは、使用するほど大きくなります.JavaScriptイベントエージェントは、親要素にイベントプロセッサを追加することで、複数のサブ要素にイベントプロセッサを追加することを回避する簡単なテクニックです.
どうやって作動しますか?
イベントエージェントは、JavaSciprtイベントでよく無視される2つの特性を使用します.イベントバブルとターゲット要素です.1つの要素上のイベントがトリガーされると、例えばマウスがボタンをクリックすると、同じイベントがその要素のすべての祖先要素でトリガーされます.この過程はイベントバブルと呼ばれている.このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.いずれのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、要素オブジェクトに属性として表示されます.イベントエージェントを使用すると、イベントプロセッサを要素に追加し、サブレベルの要素からイベントが泡を立てるのを待つことができ、このイベントがどの要素から始まったのかを知ることができます.
これは私に何のメリットがありますか?10列、100行のHTMLテーブルがあることを想像してみてください.ユーザーがテーブルのセルをクリックしたときに何をしたいですか.例えば、表の各セルをクリックしたときに編集可能な状態にする必要があることがあります.イベント・プロセッサを1000セルに追加すると、パフォーマンスに大きな問題が発生し、メモリの漏洩やブラウザのクラッシュを引き起こす可能性があります.逆に、イベントエージェントを使用すると、table要素にイベントプロセッサを追加するだけでいいです.この関数はクリックイベントを切り取り、どのセルがクリックされたかを判断することができます.
コードで書くとどうなりますか?
コードは簡単です.私たちが関心を持っているのは、ターゲット要素をどのように検出するかだけです.たとえば、table要素があります.IDは「report」です.このテーブルにイベントプロセッサを追加してeditCell関数を呼び出します.editCell関数はtableに伝達されたイベントのターゲット要素を判断する必要がある.私たちが書くいくつかの関数でこの機能が使用される可能性があることを考慮して、getEventTargetという関数に単独で配置します.
eこの変数はイベントオブジェクトを表しています.ブラウザにまたがるコードを少し書くだけでターゲット要素を返します.IEではターゲット要素はsrc Element属性に配置され、他のブラウザではtarget属性になります.
次はeditCell関数です.この関数はgetEventTarget関数に呼び出されます.ターゲット要素を手に入れると、残りのことは私たちが必要としている要素かどうかを見ることです.
editCell関数では、ターゲット要素のラベル名を確認する方法で、テーブルのセルであるかどうかを決定します.この検査は簡単すぎるかもしれません.もしそれがこのターゲット要素セルの別の要素だったら?親のtd要素を見つけるためにコードを少し修正する必要があります.編集されなくてもいいセルがあるとしたらどうしますか?この場合、編集不可能なセルに指定したスタイル名を追加し、セルを編集可能な状態にする前に、そのスタイル名が含まれていないかどうかを確認できます.選択は常に多様化しており、アプリケーションに適したものを見つけるだけです.
どんな長所と短所がありますか.JavaScriptイベントエージェントのメリットは次のとおりです.
作成するイベントプロセッサとメモリに存在するイベントプロセッサが少なくなりました.これは重要な点であり、パフォーマンスを向上させ、クラッシュのリスクを低減します.DOM更新後にイベントプロセッサを再バインドする必要はありません.もしあなたのページが動的に生成されている場合、例えばAjaxを通じて、要素がロードまたはアンインストールされたときにイベントプロセッサを追加または削除する必要はありません.潜在的な問題はそれほど明らかではないかもしれませんが、これらの問題に気づくと、簡単に避けることができます.
あなたのイベント管理コードはパフォーマンスのボトルネックになるリスクがあるので、できるだけ短く精悍にすることができます.すべての事件が泡を立てるわけではない.blur、focus、load、unloadは他のイベントのように泡を立てることはできません.実際にblurとfocusは、イベントバブルではなくイベントキャプチャ法で得ることができる(IE以外の他のブラウザで).マウスイベントを管理する際に注意すべき点があります.mousemoveイベントをコードで処理すると、mousemoveイベントが頻繁にトリガーされるため、パフォーマンスのボトルネックに遭遇するリスクが大きくなります.mouseoutはその奇妙な表現のためにイベントエージェントで管理することが難しくなった.
まとめ:jQuery、Prototype、Yahooなど、主流クラスライブラリを使用するイベントエージェントの例がいくつかあります.UI.クラスライブラリを使わない例、例えばUsable Type blogの1つを見つけることもできます.必要に応じて、イベントエージェントはツールボックスの適切なツールであり、簡単に実現できます.
JavaScriptイベントは、すべてのWebページのインタラクティブ性の基礎です(CSSドロップダウンメニューだけでなく、真のインタラクティブ性を指します).従来のイベント処理では、必要に応じて各要素にイベントプロセッサを追加または削除します.しかし、イベント・プロセッサはメモリの漏洩やパフォーマンスの低下を引き起こす可能性があります.このリスクは、使用するほど大きくなります.JavaScriptイベントエージェントは、親要素にイベントプロセッサを追加することで、複数のサブ要素にイベントプロセッサを追加することを回避する簡単なテクニックです.
どうやって作動しますか?
イベントエージェントは、JavaSciprtイベントでよく無視される2つの特性を使用します.イベントバブルとターゲット要素です.1つの要素上のイベントがトリガーされると、例えばマウスがボタンをクリックすると、同じイベントがその要素のすべての祖先要素でトリガーされます.この過程はイベントバブルと呼ばれている.このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.いずれのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、要素オブジェクトに属性として表示されます.イベントエージェントを使用すると、イベントプロセッサを要素に追加し、サブレベルの要素からイベントが泡を立てるのを待つことができ、このイベントがどの要素から始まったのかを知ることができます.
これは私に何のメリットがありますか?10列、100行のHTMLテーブルがあることを想像してみてください.ユーザーがテーブルのセルをクリックしたときに何をしたいですか.例えば、表の各セルをクリックしたときに編集可能な状態にする必要があることがあります.イベント・プロセッサを1000セルに追加すると、パフォーマンスに大きな問題が発生し、メモリの漏洩やブラウザのクラッシュを引き起こす可能性があります.逆に、イベントエージェントを使用すると、table要素にイベントプロセッサを追加するだけでいいです.この関数はクリックイベントを切り取り、どのセルがクリックされたかを判断することができます.
コードで書くとどうなりますか?
コードは簡単です.私たちが関心を持っているのは、ターゲット要素をどのように検出するかだけです.たとえば、table要素があります.IDは「report」です.このテーブルにイベントプロセッサを追加してeditCell関数を呼び出します.editCell関数はtableに伝達されたイベントのターゲット要素を判断する必要がある.私たちが書くいくつかの関数でこの機能が使用される可能性があることを考慮して、getEventTargetという関数に単独で配置します.
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}eこの変数はイベントオブジェクトを表しています.ブラウザにまたがるコードを少し書くだけでターゲット要素を返します.IEではターゲット要素はsrc Element属性に配置され、他のブラウザではtarget属性になります.
次はeditCell関数です.この関数はgetEventTarget関数に呼び出されます.ターゲット要素を手に入れると、残りのことは私たちが必要としている要素かどうかを見ることです.
function editCell(e)
{
var target = getEventTarget(e);
if(target.tagName.toLowerCase() =='td')
{
// DO SOMETHING WITH THE CELL
}
}editCell関数では、ターゲット要素のラベル名を確認する方法で、テーブルのセルであるかどうかを決定します.この検査は簡単すぎるかもしれません.もしそれがこのターゲット要素セルの別の要素だったら?親のtd要素を見つけるためにコードを少し修正する必要があります.編集されなくてもいいセルがあるとしたらどうしますか?この場合、編集不可能なセルに指定したスタイル名を追加し、セルを編集可能な状態にする前に、そのスタイル名が含まれていないかどうかを確認できます.選択は常に多様化しており、アプリケーションに適したものを見つけるだけです.
どんな長所と短所がありますか.JavaScriptイベントエージェントのメリットは次のとおりです.
作成するイベントプロセッサとメモリに存在するイベントプロセッサが少なくなりました.これは重要な点であり、パフォーマンスを向上させ、クラッシュのリスクを低減します.DOM更新後にイベントプロセッサを再バインドする必要はありません.もしあなたのページが動的に生成されている場合、例えばAjaxを通じて、要素がロードまたはアンインストールされたときにイベントプロセッサを追加または削除する必要はありません.潜在的な問題はそれほど明らかではないかもしれませんが、これらの問題に気づくと、簡単に避けることができます.
あなたのイベント管理コードはパフォーマンスのボトルネックになるリスクがあるので、できるだけ短く精悍にすることができます.すべての事件が泡を立てるわけではない.blur、focus、load、unloadは他のイベントのように泡を立てることはできません.実際にblurとfocusは、イベントバブルではなくイベントキャプチャ法で得ることができる(IE以外の他のブラウザで).マウスイベントを管理する際に注意すべき点があります.mousemoveイベントをコードで処理すると、mousemoveイベントが頻繁にトリガーされるため、パフォーマンスのボトルネックに遭遇するリスクが大きくなります.mouseoutはその奇妙な表現のためにイベントエージェントで管理することが難しくなった.
まとめ:jQuery、Prototype、Yahooなど、主流クラスライブラリを使用するイベントエージェントの例がいくつかあります.UI.クラスライブラリを使わない例、例えばUsable Type blogの1つを見つけることもできます.必要に応じて、イベントエージェントはツールボックスの適切なツールであり、簡単に実現できます.