undefined in eventListener

undefinedin.net2015/7/3 wrote by ironiqu

undefined in eventAttributes

今回は、 Eventについて深堀りします

今日のアジェンダ

1.前回の復習2. EventListenerってなに？3.冗長的な Event設定4. Eventの発生5. Eventの伝播6. eventListenerってみる7.今週の LT

60分ほどおつきあいください

前回の復習

前回について何か覚えてる方！

前回の復習

前回は、 Elementに Eventを設定しました

前回の復習

HTMLタグ上での設定

JavaScript上での設定

前回の復習

どんな Eventが設定できるのか

Eventの種類も紹介しました

前回の復習

紹介した内容実は完全な解説はしていませんでした

気づいた方いますか？

前回の復習

idをつけた Elementに対するEventの設定のみしか解説していません

前回の復習

特定の classや name、タグ名

それらについて Event設定は前回の解説の方法では無効です

前回の復習

その設定方法の解説

Eventの真髄

今日は、以上を解説します

eventListenerってなに？

まずは、タイトル回収

eventListenerとは、なにか※IE9以上、各種ブラウザ最新を想定した解説です。 IEに関しては後述


eventListenerとは

文字通り、 Event（事象）の Listener（聞き手）


前回は、 Element.onclickのように

明示的に Elementを設定しました


eventListenerとは

InternetExplorerでは、バージョン 9以前だと、

独自の実装のため、 attachEventという呪文を代わりに使わなければなりません。


eventListenerを使用した場合

一つの Eventに複数の処理をセットできる前回の解説のものは

イコールで処理を結びセットしていた


eventListenerを使用した場合

Elementを明示的にせず特定の Elementに対して

（またはどんな Elementも）対応している Eventを発火できます


eventListener

前回紹介したものより新しい仕組み前回の紹介（ 1999年勧告）

http://www.w3.org/TR/html4/

今回の紹介（ 2000年勧告）http://www.w3.org/TR/DOM-Level-2-Events/

http://www.w3.org/TR/html4/

http://www.w3.org/TR/DOM-Level-2-Events/

冗長的な Event設定

classを使って Eventを設定するには？


まずは、 getElementsByClassNameで

Elementsを取得します

var elements = document.getElementsByClassName(“elems”);※呪文の説明は今後予定


Elementsを 1つずつ塊から取り出し個別に Eventを設定する


for(var i = 0; i < elements.length; i++){ elements[ i ].onclick = function(){alert(“click now!”);}}


前回の解説より、プラス 1行ほど処理が増えてます

idを使って Eventを設定した時より煩雑かつ冗長的な雰囲気がありますね

Eventの伝播

では、その冗長な処理を撤廃するためには

Eventについてもっと知る必要があります

Eventの伝播

伝播とは

次々に伝わって広まること波動が広がっていくこと

Weblioより引用

Eventの伝播

Elementは Eventを発生させると発生した Elementを内包する上位の Element

に伝えていきます

Eventの伝播

伝播の種類capture phasebubbling phase

聞いたことある方いますか？

Eventの伝播

言葉では理解しにくい用語です

単純に理解しやすいようにかなり噛み砕いた説明をいたします

Eventの伝播

言葉の意味

capture 捕まえる

bubbling 泡立ち

Eventの伝播

capture phase捕まえる

つまり、 Eventが発生した場合発生した Elementまで、

親要素から順に子要素へ捕まえに行く

Eventの伝播

bubbling phase泡立ち

つまり、 Eventが発生した場合発生した Elementから、

子要素から順に親要素へ伝えに行く

Eventの伝播

はい、わかりましたねこれで、皆さんは Eventの全てを理解出来ま

した

おめどうございます（拍手）

Eventの伝播

と、簡単にはいきませんので図解を準備しました（W3Cが）

Eventの伝播https://w3c.github.io/uievents/#event-flow

発生元を探しに行く発生を伝えていく

https://w3c.github.io/uievents/#event-flow

Eventの設定

伝播のフローさえ、わかってしまえば設定をおこなわず任意の Elementで

Eventを起こせるようにできます

Eventの設定

eventListenerを使うために必要になってくるものは

指定したい Eventの種類判定したい Elementの判断基準

Eventの設定

eventListenerの呪文（限定的なもの）

document.getElementById(“elem”).addEventListener(“click”, function(){ alert(“click now!”);}, false);

前回の呪文と同等

Eventの設定

eventListenerの呪文（柔軟なもの）

document.addEventListener(“click”, function(e){ if(e.target.id == “elem”){ alert(“click now!”); }}, false);

前回の呪文と同等

Eventの設定

eventListenerの設定をしたことで得られる利点は

子要素の Eventも拾ってくれる

Eventの設定

eventAttriute(s)との設定の内容は特に大差ありません

違いとしては、利用できる処理に違いある設定の仕方が違うなど

eventListenerってみる

解説は非常に要素が多くすぐには理解できないと思います

実際の動きを確認して理解を高めてください


classを使いレガシーな手法で冗長的な Event設定

eventListener_class.html


キャプチャの発生を表現

eventListener_capture.html


バブリングの発生を表現

eventListener_bubbling.html


Eventが発生した Elementの属性を出力

eventListener_element.html


限定的（ class）な条件の Elementに対してEventを実行する

eventListener_select.html


jQueryが世間的に重宝される理由のひとつとして

Eventの煩わしい操作を吸収して簡易的にできるという理由があります

今週の LT

s.mの

JavaScript on Photoshop

PhotoshopをJavaScriptで操作しよう！

デザインやイラストは超楽しい！…でも同じ作業の繰り返しって退屈

退屈な作業はなるべく自動化しよう！

Photoshopスクリプト

JavaScriptを使って、Photoshopの操作を自動化できる！

「アクション」使えば

いいじゃん！！

アクションで解決できることはアクションを使うべき

……ですが

PSスクリプトの良いところ・変数や条件分岐が使える・フォルダやファイルの操作ができる・外部アプリケーションの起動・・・ etc

⇛アクションよりも複雑な操作・処理が可能

それで？結局、何ができるの？

実際にどんなことができるのか

●テキストレイヤーの文字の検索、置換●上書き保存の度に別フォルダに PSD/JPGデータを連番で保存（データをバックアップ）

参考サイト

「 Adobe Photoshop CS6自動化作戦」http://www.openspc2.org/book/PhotoshopCS6/

まとめ

面倒な作業はなるべく自動化・効率化してもっと楽しい作業に時間を使おう！

今週の LT

JavaScriptを絡めた解説の LTJavaScriptで作った作品の努力やレビューなど、どしどし募集

undefined in eventAttributes

参加いただきありがとうございました

次回は

undefined in eventListener

Documents

Transcript of undefined in eventListener