DOMイベントモデル

  • Posted by: javascriptmania
  • 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
<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イベントハンドラを利用する位置を細かく指定することができます。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/54-23639334
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック