DOMイベントモデル
- 2011-05-23 Mon 09:01:04
- DOM
イベントをJavaScriptで操作する方法に関してはイベントハンドラを学習しましたが、今回はDOMを使う方法を学びます。
イベントハンドラはHTMLファイルにJavaScriptコードを記述する方法で、直観的で分かりやすいという特徴があります。
しかしHTMLとJavaScriptは本来別物であり、あまり混在させるのは望ましくないと考えると、HTMLとJavaScriptは完全に切り離すべきではないかということになります。
HTMLの中にJavaScriptを記述せずにどうやってイベント操作するかというと、getElementById()などのメソッドを使ってDOMで操作する個所を指定し、プログラムを書きます。
例として、まずは簡単なところから始めます。
イベントハンドラとは で出てきたソースを再掲します。
<html>
<head> <title> </title>
</head>
<body onload="alert('Hello')">
</body>
</html>
ページを読み込んだら「Hello」というダイアログを表示する、ありふれたソースです。
これを、HTMLファイルのJSSample.htmlと、JavaScriptファイルのJSSample.jsとに分離します。
JSSample.html
JSSample.js
上のソースでは、JavaScriptのソースをHTMLと分離し、windowオブジェクトにonloadイベントハンドラを設定しました。
この場合、ページ読み込み時にダイアログを表示するだけですが、今度は、divタグにid値を設定し、このdiv領域をクリックしたらダイアログが表示されるようにしてみます。
JSSample.html
JSSample.js
getElementById()メソッドを使うことで、onclickイベントハンドラを利用する位置を細かく指定することができます。
<html>
<head> <title> </title>
<script type="text/javascript" src="JSSample.js"></script>
</head>
<body>
</body>
</html>
JSSample.js
window.onload=function(){
alert("Hello");
}
上のソースでは、JavaScriptのソースをHTMLと分離し、windowオブジェクトにonloadイベントハンドラを設定しました。
この場合、ページ読み込み時にダイアログを表示するだけですが、今度は、divタグにid値を設定し、このdiv領域をクリックしたらダイアログが表示されるようにしてみます。
JSSample.html
<html>
<head> <title> </title>
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/JSSample.js"></script>
</head>
<body>
<div id="hello">クリックしてください</div>
</body>
</html>
JSSample.js
window.onload=function(){
var hello=document.getElementById("hello");
hello.onclick=function(){
alert("Hello");
}
}
getElementById()メソッドを使うことで、onclickイベントハンドラを利用する位置を細かく指定することができます。
- 関連記事
タグ :
Trackback+Pingback:
- TrackBack URL for this entry
- http://javascriptmania.blog111.fc2.com/tb.php/54-23639334
Comments: