Post on 13-Aug-2015
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（更に深く）