トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > イベント編 > イベント追加

onClickなどのイベントはタグの中にも書けるが、
Javascript内でも加えることができる。
document.getElementbyID("タグ名").onClickで関数を指定したり、
attachEvent(IE),addEventListener(Opera,Firefox)などで
イベントを追加することができる。

例1:
if (element名.addEventListener) { 
          element名.addEventListener(event名, 呼び出す関数の指定。ここに直接書くことも可能, false);
} else if (element名.attachEvent) { //for IE
          element名.attachEvent(onevent名, 呼び出す関数の指定。);
}

例2:
document.getElementById("id名").onclick = function(){};　//<-当然左のように無名関数を使わずに関数名を指定して、別関数で実装もあり。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ただし、document.getElementById("id名").onclick= func1;が正解でfunc1();は誤り。
                                                              クリック時の座標はfunction(event) {}でevent.x等で取得できる。

例3:マウスイベントもこの通り。右クリックメニューはcontextmenu。
window.addEventListener("mousemove",呼び出す関数名,false);

• イベントハンドラ一覧
• イベントプロパティについてはhttp://www.tohoho-web.com/js/event.htm参照。
• 独自イベントの作成についてはhttp://d.hatena.ne.jp/shim0mura/20111224/1324735206参照。
• キー番号一覧(Number(event.keycode)と比較すると場合分けできる)は

　http://www.openspc2.org/reibun/javascript/appendix/keydown.html
　http://www.openspc2.org/reibun/javascript/appendix/keypress.html
　が参考になる。

---

逆にイベントが伝搬していくのを防ぐものとしてstopPropagation();がある。
また、イベントハンドラ.preventDefault();とすると、イベントをさせないようにしたりできる。
preventDefaultの使い道としては、aタグでリンク飛ばさない等の各種機能無効化や動作差し替え等々。