Javascript

イベントの伝播を理解しよう

イベントの伝播についてとそのメリットについて確かめていきます。

  • イベント伝播
  • target
  • currentTarget

イベント伝播

・今回はイベントの伝播について見ていきます。

・例えばclick などのイベントが発生した場合、そのイベントは親要素をたどってどんどん伝播していくという仕組みになっています。

・使い方としてはリストタグですべての要素にイベントを追加したいときに、click は親にも伝播されるので、親要素でのみ EventListener を追加してあげれば一回で書くことができるという利点があります。

・また、 Event オブジェクトを使えばクリックした要素は e.target 、そして EventListener を追加した要素は e.currentTarget で取得できるので、処理の中でこうしたプロパティを使うこともできます。

target

・例えばToDo リストを作り、クリックするたびに打ち消し線が付くようにしてみましょう。

・今回、個々の li にイベントを設定するのではなくて、 ul のほうに設定し、イベントはクリックしたらというように書いていきます。

currentTarget

・まずCSSでクラス属性でline_throughに打消し線のスタイルを与えてあげます。

・実際にクリックされた要素は Event オブジェクトの target 、今回 EventListener を設定した ul 要素のほうは e.currentTarget で取得できるので、今回の場合は e.target のほうのクラスを付け替えてあげれば良いでしょう。

・ Event オブジェクトを渡してあげて、 e.target が li か一応判定しておきましょう。e.target.NodeName === 'LI' だったら、と書いてあげます。

・ e.target の classList.toggle() メソッドを使ってあげれば良いでしょう。

e.target.classList.toggle('line_through’);と書いてあげればいいですね。

-Javascript