1. undefinedin.net
2015/7/3 wrote by ironiqu

2. undefined in eventAttributes
今回は、Eventについて深堀りします

3. 今日のアジェンダ
1. 前回の復習
2. EventListenerってなに？
3. 冗長的なEvent設定
4. Eventの発生
5. Eventの伝播
6. eventListenerってみる
7. 今週のLT
60分ほどおつきあいください

4. 前回の復習
前回について何か覚えてる方！

5. 前回の復習
前回は、ElementにEventを設定しました

6. 前回の復習
HTMLタグ上での設定
JavaScript上での設定

7. 前回の復習
どんなEventが設定できるのか
Eventの種類も紹介しました

8. 前回の復習
紹介した内容
実は完全な解説はしていませんでした
気づいた方いますか？

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

10. 前回の復習
特定のclassやname、タグ名
それらについてEvent設定は
前回の解説の方法では無効です

11. 前回の復習
その設定方法の解説
Eventの真髄
今日は、以上を解説します

12. eventListenerってなに？
まずは、タイトル回収
eventListenerとは、なにか
※IE9以上、各種ブラウザ最新を想定した解説です。IEに関しては後述

13. eventListenerってなに？
eventListenerとは
文字通り、Event（事象）のListener（聞き手）

14. eventListenerってなに？
前回は、Element.onclickのように
明示的にElementを設定しました

15. eventListenerってなに？
eventListenerとは
InternetExplorerでは、バージョン9以前だと、
独自の実装のため、attachEventという呪文を
代わりに使わなければなりません。

16. eventListenerってなに？
eventListenerを使用した場合
一つのEventに複数の処理をセットできる
前回の解説のものは
イコールで処理を結びセットしていた

17. eventListenerってなに？
eventListenerを使用した場合
Elementを明示的にせず
特定のElementに対して
（またはどんなElementも）
対応しているEventを発火できます

18. eventListenerってなに？
eventListener
前回紹介したものより新しい仕組み
前回の紹介（1999年勧告）
http://www.w3.org/TR/html4/
今回の紹介（2000年勧告）
http://www.w3.org/TR/DOM-Level-2-Events/

19. 冗長的なEvent設定
classを使ってEventを設定するには？

20. 冗長的なEvent設定
まずは、getElementsByClassNameで
Elementsを取得します
var elements = document.getElementsByClassName(“elems”);
※呪文の説明は今後予定

21. 冗長的なEvent設定
Elementsを1つずつ塊から取り出し
個別にEventを設定する

22. 冗長的なEvent設定
for(var i = 0; i < elements.length; i++){
elements[ i ].onclick = function(){alert(“click now!”);}
}

23. 冗長的なEvent設定
前回の解説より、プラス1行ほど処理が増えて
ます
idを使ってEventを設定した時より
煩雑かつ冗長的な雰囲気がありますね

24. Eventの伝播
では、その冗長な処理を撤廃するためには
Eventについてもっと知る必要があります

25. Eventの伝播
伝播とは
次々に伝わって広まること
波動が広がっていくこと
Weblioより引用

26. Eventの伝播
ElementはEventを発生させると
発生したElementを内包する上位のElementに
伝えていきます

27. Eventの伝播
伝播の種類
capture phase
bubbling phase
聞いたことある方いますか？

28. Eventの伝播
言葉では理解しにくい用語です
単純に理解しやすいように
かなり噛み砕いた説明をいたします

29. Eventの伝播
言葉の意味
capture 捕まえる
bubbling 泡立ち

30. Eventの伝播
capture phase
捕まえる
つまり、Eventが発生した場合
発生したElementまで、
親要素から順に子要素へ捕まえに行く

31. Eventの伝播
bubbling phase
泡立ち
つまり、Eventが発生した場合
発生したElementから、
子要素から順に親要素へ伝えに行く

32. Eventの伝播
はい、わかりましたね
これで、皆さんはEventの全てを理解出来まし
た
おめどうございます（拍手）

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

34. Eventの伝播
https://w3c.github.io/uievents/#event-flow
発生元を探しに行く
発生を伝えていく

35. Eventの設定
伝播のフローさえ、わかってしまえば
設定をおこなわず任意のElementで
Eventを起こせるようにできます

36. Eventの設定
eventListenerを使うために
必要になってくるものは
指定したいEventの種類
判定したいElementの判断基準

37. Eventの設定
eventListenerの呪文（限定的なもの）
document.getElementById(“elem”).addEventListener(“click”, function(){
alert(“click now!”);
}, false);
前回の呪文と同等

38. Eventの設定
eventListenerの呪文（柔軟なもの）
document.addEventListener(“click”, function(e){
if(e.target.id == “elem”){
alert(“click now!”);
}
}, false);
前回の呪文と同等

39. Eventの設定
eventListenerの設定をしたことで
得られる利点は
子要素のEventも拾ってくれる

40. Eventの設定
eventAttriute(s)との設定の内容は
特に大差ありません
違いとしては、
利用できる処理に違いある
設定の仕方が違うなど

41. eventListenerってみる
解説は非常に要素が多く
すぐには理解できないと思います
実際の動きを確認して理解を高めてください

42. eventListenerってみる
classを使いレガシーな手法で
冗長的なEvent設定
eventListener_class.html

43. eventListenerってみる
キャプチャの発生を表現
eventListener_capture.html

44. eventListenerってみる
バブリングの発生を表現
eventListener_bubbling.html

45. eventListenerってみる
Eventが発生したElementの
属性を出力
eventListener_element.html

46. eventListenerってみる
限定的（class）な条件のElementに対して
Eventを実行する
eventListener_select.html

47. eventListenerってみる
jQueryが世間的に重宝される理由のひとつとし
て
Eventの煩わしい操作を吸収して
簡易的にできるという理由があります

48. 今週のLT
s.m
の
JavaScript on Photoshop

49. Photoshopを
JavaScriptで操作しよう！

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

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

52. Photoshopスクリプト
JavaScriptを使って、
Photoshopの操作を自動化できる！

53. 「アクション」
使えば
いいじゃん！！

54. アクションで解決できることは
アクションを使うべき
ですが……

55. PSスクリプトの良いところ
・変数や条件分岐が使える
・フォルダやファイルの操作ができる
・外部アプリケーションの起動
・・・etc
⇛アクションよりも複雑な操作・処理が可能

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

57. 実際にどんなことができるのか
●テキストレイヤーの文字の検索、置換
●上書き保存の度に別フォルダにPSD/JPGデー
タを連番で保存（データをバックアップ）

58. 参考サイト
「Adobe Photoshop CS6自動化作戦」
http://www.openspc2.org/book/PhotoshopCS6/

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

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

61. undefined in eventAttributes
参加いただきありがとうございました
次回は