1日ひとつ、強くなる。content1日ひとつ、強くなる。「異なる性質」を持つので注意したい。確認:イベントリスナーとはイベントリスナーとは、イベントターゲット(HTMLの各種要素=ノード等)に対して、イベント(clickやhover)が発生した際に実行する「関数、もしくはオブジェクト」を関連付ける仕組みのこと。具体的には、あるdivがマウスオーバーされた時に特定の関数を実行する、といった機能を実装する際に使われる。}}イベントオブジェクトとはイベントリスナーで指定する関数の第一引数に、イベント・オブジェクトが入る。function(event){}と同じ意味。CodePen.やっと本題だが、event.currentTargetは、イベントが付けられたノードを返し、event.targetは実際にイベントが発生したノードを返す。上記のコードデモでは、nakaと書かれたdivはcurrentTargetを指定しているため、正常に動くが、その下のdivではラテン語のダミーテキストにマウスオーバーをするとテキスト部分だけに色が付いてしまい意図した挙動とならない。こちらはtargetを指定しているためだ。targetはイベントリスナーを付けたノードではなく、マウスオーバー「イベントが発生したノードそのもの」を返すために、今回の例ではダミーテキストが入った<p>ノードを返す。結果としてバックグラウンドカラーが、pの部分だけに指定されてしまう。実装時には、HTMLの構造、及びクラス付に注意しながらtargetとcurrentTargetを使い分ける必要がある。CodePen.AddHoverクラスの中に機能を実装し、ページ読み込み時にAddHoverクラスをnewでたたく。マウスホバーを実装するCodePenでES6以上をBabelでコンパイルして使うES6とBabelES6ではclass構文が使えるようになり、素直なオブジェクト指向プログラミングが可能になったが、ES6は現状サポートしていないブラウザもある。そのためES6で書いたスクリプトはBabelを使ってES5にトランスコンパイルして使用する。CodePenとBabelCodePenではBabelをプリプロセッサーとして用いることができ、これによってES6記法のJSをES5記法に変換することができる。functionが使える。これとjQueryを組み合わせた記法を以下に示す。functionとjQueryのhoverメソッドを用いる場合にthisの扱いに注意することがポイントである。CodePen.CoffeeScriptとの違いCofeeScriptの開発はほぼ停止しているらしく、かつ一番必要とされていたクラス構文がES6で実装されたことから、基本的にはES6を中心に書いていけばよいものと思われる。{}も()も;も基本的に必要で、通常のJSと同じ。(1)HomeAbout記事一覧1日ひとつ、強くなる。