はじめに
この機能は、まだ十分理解していませんが、一部で使ってみたところ、有効なのを確かめられました。これまでは、イベントリスナーを登録したい個々の要素で、登録していました。これだと、要素が入れ子の場合とか、動的要素とか、要素が増えてくるとリスナーがお化け状態になり、どこでどのリスナーが発火するのかがわからなくなりました。そのため、デバッグに時間がかかり、いつもどこかのタイミングで、コードを整理しなければと思っていました。
あるとき、イベント委譲が便利であると知り、それを適用しようと思いました。今回は、その顛末記です。以下に、イベント委譲を使わないときと使用した時の違いについてご説明いたします。
イベント委譲を使用していない例
これまでは、このやり方でリスナーを登録していました。特に、リストで、各項目の要素が多くあるケースでは、forループを回して、それぞれにリスナーを登録していました。これだと、メモリーを相当消費します。
イベント委譲を利用した例
イベント委譲を利用すると、親要素でリスナーを登録することができます。リストのような場合でも、forループを使うことなく、ただ、ひとつ、e.target.idとか、e.target.classNameとかで要素を特定して、リスナーを登録できるため、メモリーは消費しません。これは、最大の強みです。
また、ページの要素、特に、子や孫、ひ孫以下の要素に対しても、バブリングの機能で動作します。
しかし、例外がありました。'mouseenter'イベントは、バブリングしないということです。これについては、以下に記述しています。
イベント委譲を使うことで、コードが非常に読みやすくなりました。可読性が増します。
使わない手はないと思います。
イヘント委譲の一番いいところは
それは、これまでは、要素に直接イベントリスナーを登録していたのですが、このイベント委譲を用いると、先にイベント委譲先でリスナーを登録(この時は、まだ、指定の要素はアペンドしていません。)しておくと、後から、アペンドした要素をクリックしたときに、イベントリスナーが発火することです。それまでは、例えば、サムネイルなどの画像は、表示が完了してからでないと、リスナーを登録できませんでした。この差は大きいです。
感想
いつも、デバック時に、コンソールのエラーを見るのですが、たくさんのエラーが出ていて、いささか、うんざりします。しかし、それにめげずに、主なエラーから順にひとつづつエラーをつぶしてゆきます。いくつかの小さなエラーはひとまず、スキップします。体制には影響しないものです。
重大なこと
これには、気づきませんでした。'click'イベントは、イベント委譲をすぐに確認できますが、'mouseenter'は、何度、挑戦しても、イベント委譲を確認できません。バブリングしていないようです。そこで、最後のつなぎではないですが、AIアシスタントに質問しました。すると、的確な答えが返ってきました。
やはり、'mouseenter'は、バブリングしないそうです。代わりに'mouseover'を使うようにとの答えが返ってきました。
このように、当然、動作するものと思っていたことが、動作しないので、何度も試行錯誤を繰り返す羽目になりましたが、最後のつなぎとして、AIアシスタントにお願いしたところ、的確な答えが返ってきました。これは、AIアシスタントのすばらしいところです。
小さな発見
AIアシスタントとは、間違った道を進んでいるのを気づかせてくれる「道しるべ」のようなものです。
「最後の砦」として、利用するとより効果が出ると思います。それは、早めに利用してしまうと、その有難さを身に染みて実感ができないためです。苦労して苦労してそれから利用するとその有難味がより実感できます。
あとがき
今回のことで、イベント委譲が便利なことが理解できました。これからは、この手法で、動的要素に対しても、個々の要素に対しても使用して行きたいと思います。驚くほど、コードがすっきりしました。
長い間、このとこに気づかずに、あっちこっちでイベントリスナーを登録していました。
知らないということは損なことだと改めてわかりました。デバッグの困難さから解放された気分です。