undefinedin.net2015/6/18 wrote by ironiqu

undefined in eventAttributes

今回は、 Elementの Eventについて覚えていきます

今日のアジェンダ

1.前回の復習2. Elementの Eventってなに？3. Eventの種類4. Eventの設定方法5. eventAttributesってみる6.他の言語環境の Event?7.今週の LT

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

前回の復習

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

前回の復習

Elementの取得方法についてですね

前回の復習

Elementの取得の呪文を解説して取得を実演しました

では、 idでの取得をどなたか教えてください

前回の復習

idの値を使って取得

<p id=”text”> テキスト </p>

document.getElementById(“text”)

前回の復習

classの値を使って取得

<p class=”text”> テキスト </p>

document.getElementsByClassName(“text”)

前回の復習

詳細につきましては前回のスライドを見てください

Elementの Eventってなに？

では、本題

Eventについてです

Elementの Eventってなに？

Event

出来事、事象weblio辞書より引用

Elementの Eventってなに？

言葉としての Eventの意味はご存知だと思います

では、Webページに於ける Eventとは？

Elementの Eventってなに？

Webページに於ける Eventは

アクセスした瞬間より始まりページを閉じる瞬間までに発生する事象

Elementの Eventってなに？

みなさんは、現代っ子なのでWebページを閲覧すると思います

Elementの Eventってなに？

Webページを閲覧した時

みなさんのどのような行動がEventとなるでしょうか

Elementの Eventってなに？

少なくとも、マウスでの操作は

ほとんど Eventとなります（ホイールクリックの非対応ブラウザあり）

Elementの Eventってなに？

近年では、タッチスクリーンの携帯電話でWebページを閲覧する人が増加傾向です

画面タッチの行動も Eventで認識しますhttp://www.w3.org/TR/touch-events/ 2013年に勧告

Elementの Eventってなに？

キーボードで入力する行動も Event

Elementの Eventってなに？

ブラウザのサイズ変更やスクロールも Eventとなる

ブラウザのアクティブであるかも Eventとなる

Elementの Eventってなに？

知名度の低い Eventとして

コピー カット ペースト

これらも Eventとなります

Eventの種類

Eventは、すべての Elementや対象に平等に同じものが

備わっているわけではありませんhttp://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents-h3

Eventの種類

と、いいますと？

使える Elementには、制限があります

Eventの種類

Webブラウザを司るwindowという対象 (bodyタグ )には

onresize onload onbeforeunload などなど window専用の Event

http://www.w3.org/TR/2009/WD-html5-20090212/browsers.html#window

Eventの種類

Elementでは

onclick onkeydownなどなど

http://www.w3.org/TR/DOM-Level-3-Events/#h-event-types-list

Eventの種類

Form(inputタグ )での Event

onselect onchange onsubmitなどなど

Eventの種類

マウスやキーボードなどの操作による種類

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

Eventの種類

実際に、大量にある Eventを覚えるのは大変です

なので、どのような Eventがあるかおさえておけばよいでしょう

Eventの種類

DOMの Eventの一覧を確認したい場合、W3Cの勧告では非常に探しづらいので

Wikipediaで綺麗にまとまっているのを参考にしたらよいと思います

https://en.wikipedia.org/wiki/DOM_events

Eventの設定方法

Eventを設定するには、

いくつかの準備が必要です

Eventの設定方法

初見だと大変、煩わしいですが定型文ですので、頑張って覚えましょう

Eventの設定方法

まずは、 function

一連の処理の塊の作り方を覚えましょう

Eventの設定方法

function(){ /* 処理 */};

functionという文字と括弧の配置を覚えましょう

こっそりと存在するセミコロンも忘れずに

Eventの設定方法exam = function(){ alert(“test”);};

examという箱に「 =」で functionを設定してあげます

これで、 examを実行すると中の alert(“test”);が

実行されるわけですね

Eventの設定方法

Elementに Eventを設定してあげるには、

先の functionを設定するだけです

Eventの設定方法

では、実際に設定してみると次のようになります

Eventの設定方法

document.getElementById(“button”).onclick = function(){ alert(“click now!”);};

Elementを取得しますElementの Eventに対して

functionを設定します

Eventの設定方法

今の例は、scriptで設定した場合です

次の例は、 Elementに直接設定したものです

Eventの設定方法

<button id=”button” onclick=”alert(\”click now!\”);”>click</button>

Elementを記述しますElementの Eventに対して

functionを設定します

Eventの設定方法

”alert(\”click now!\”);”

この部分は注意が必要です！「”」の内側に「”」を書く場合は「”」で囲った部分と競合するため

「 \(バックスラッシュ )」を付けてあげましょう

というルール

Eventの設定方法

これで、みなさんは、Eventマイスターになれました

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

eventAttributesってみる

では、いくつかの Eventを設定した例を実際にみてください

eventAttributesってみる

入力されている文字をリアルタイムに別の Elementで表示

eventAttribute_input.html

eventAttributesってみる

スクロールされたときに Elementをタイミングをずらしてスクロール（パララッ

クス）

eventAttribute_scroll.html

eventAttributesってみる

マウスの移動に合わせてElementが追随（マウスストーカー）

eventAttribute_move.html

他の言語環境の Event?

基本的にユーザーインターフェースを伴うアプリケーション開発では

Eventは同じように実装できます

他の言語環境の Event?

Android(Java)

button.setOnClickListener(new View.OnClickListener(){ public void onClick(View v){ AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this); alertDialogBuilder.setMessage("click now!").show(); }});

他の言語環境の Event?

Windows(C#)

this.btn.Click += delegate(object sender, RoutedEventArgs e){ MessageBox.Show("click now!");};

今週の LT

s.mの

JavaScript on Photoshop

今週の LT

JavaScriptを絡めた解説の LTJavaScriptで作った作品の努力や

レビューなど、どしどし募集

undefined in eventAttributes

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

次回は eventListener（更に深く）