JavaScriptのイベント

それはとあるユーザのつぶやきから始まった

Twitterの以下のつぶやきを見て、ちょっと考えてみました。
http://twitter.com/altnight/status/21403130106

@os0x 質問です。Javascriptにおいてイベントの実行順序で詰まることが多いのですが、これを体系的に(あるいは効率的に)学ぶにはどういった方法がいいでしょうか？なにを知るべきでしょうか？

JavaScriptはイベント処理が変態的なので、その癖を掴む必要があります。
ということで、以下に僕なりのイベントに関する考え方をまとめてみました。

イベントとは何か

まず、前提としてイベントとはなんぞやほいという話です。
イベントを日本語訳すると行事とか出来事とかになりますね。
プログラムの世界で言うならば例えばマウスをクリックしたとか、キーボードを押したとか、ページを読込み終わったとかそういう処理のことを「イベント」と呼んでいますね。
大前提なので書くまでもないのですが。

イマドキのイベント関数

JavaScriptを学びはじめて間もない人はどうやったらイベントを「追加」出来るのだろうかと考えますね。

よくあるパターンですと、
<input type="button" onclick="alert(1);" value="クリックするとアラート" />
上記のようなコードを見て、なるほど、こうすればイベント追加出来るんだなと思いがちですが、これはお薦めできない方法です。
何故お薦めできないのかというと、HTMLとJavaScriptが混在してしまっているからです。
その為にいらぬ混乱を招いていると僕は思います。
(実際僕もよく分からなかったときはコレで苦しみました)

イマドキonclick=～みたいな書き方は緊急的なソース意外には避けたほうが賢明でしょう。
onload=～みたいな書き方も古いですね(←言い切った！)

これからは、DOM Level2のイベント追加方法を覚えましょう。
DOM Level2の素晴らしい点は、JavaScriptをscriptタグ内にまとめることが出来るという事です。
HTMLを汚さずにJavaScriptを実行できるようになり、HTMLの見通しが良くなり、JavaScriptも見やすくなるという一石二鳥な感じです。

書き方は
JavaScript
<script>
function init(){
var node = document.getElementById('btn');
node.addEventListener('click',function(){ alert(2); }, false );
}
document.addEventListener('DOMContentLoaded', function(){ init(); }, false );
</script>

HTML
<body>
<input type="button" id="btn" value="クリックするとアラート" />
</body>

実に明快ですね。
でも、最初の書き方よりコードが増えていて全然嬉しくないというのが普通の人の感覚。
その感覚は正しいです。
短いコード程度なら、それこそ、onほにゃららイベントで書いてしまった方が楽チンなんです。
ただ、その後開発を続けていっていつの間にかコードが長くなった時、困るようになります。
なにより、onほにゃららイベントはイベントを一つしか登録出来ません。
しかし、addEventListenerを使うと嬉しいのは、複数のイベントを登録出来るって所なんです。

JavaScript
<script>
function init(){
var node = document.getElementById('btn');
node.addEventListener('click',function(){ alert(3); }, false );
node.addEventListener('click',function(){ var dt = new Date().getTime(); alert(dt); }, false ); //これが嬉しい
}

document.addEventListener('DOMContentLoaded', function(){ init(); }, false );
</script>

HTML
<body>
<input type="button" id="btn" value="クリックするとアラート" onclick="alert('これも動く');" />
</body>

上記のようなコードを実行した際に、コメントで「これが嬉しい」と書いてるコードを追加するだけで処理追加出来るという点が嬉しいのです。
ただ、その嬉しさを体験するには大分複雑なコードを書かないと実感出来ないので、実用性を感じ無いかもしれません。

イベントの実行順序

上記コードを実行していただくと理解出来ますが、追加した順に実行されます。
なので、最後のコードを実行すると、最初にonclickが実行されて、後はaddEventListenerで追加した順にalertが表示されるハズです。
すぐに確かめたい方はこちらでどうぞ

イベント追加のテスト(IE除く) - jsdo.it - share JavaScript, HTML5 and CSS

問題点は何？

結局、最大の問題点は、JavaScriptでやらせる処理の難しさが案件によってぶれまくるって事でしょうかね。
その為に色々と頭がごちゃごちゃになるってことがよくあります。
後はJSONPのcallback関係が若干理解しづらいかもしれません。

最後に

これでできる！クロスブラウザJavaScript入門：第7回　JavaScriptとHTMLとDOMの基本#2 イベント編
イベント関係ですと、os0xさんがまとめられたこの記事が良記事ですので、一読をオススメ致します。
以上です。

Loox Uと初音ミクで行こう！

このブログを検索