イベントと実行タイミング

特定のタイミングで実行したいスクリプトをまとめる

関数：function

function myidEvent() {
    alert( '押されました' );
}

myidEvent() という名前でスクリプトをグループ化しました。

特定のイベントに関連づける

HTML内に各要素の属性のonClickなどイベント用の属性に記述する
DOMで取得した要素のonClickなどのプロパティに記述する
DOMでaddListenerを使う

1. HTML内に属性としてonClick時に定義した関数を呼ぶ

<p onClick="myidEvent();">テスト</p>

この「テスト」という文字をクリックされたときにfunctionで定義した関数「myidEvent() 」の内容が実行されます。

【記述例】
この例では、HTMLの要素内にスクリプトを記述しているため振る舞いと文書構造が分離できません。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p onClick="myidEvent();">テスト</p>
<script>
 function myidEvent() {
    alert( '押されました' );
 }
</script>
</body>
</html>

【記述例】
DOMを使い書き換えてみます。
「getElementById()」メソッドは、HTMLが読み込まれた後に実行する必要があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p id="myID">テスト</p>
<script>
function myidEvent() {
    alert( '押されました' );
}
document.getElementById( 'myID' ).onclick = myidEvent;
</script>
</body>
</html>

window.onloadを利用する

HTMLの下のほうに記述することはメンテナンスの上でも不都合です。
外部ファイルとして「.js」ファイルを読み込む場合も同じです。

ページが読み込まれた際に命令が実行されるようにする

《HTML》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
<script src="dom_click.js"></script>
</head>
<body>
<p id="myID">テスト</p>
</body>
</html>

《外部JSファイル》

window.onload = function(){
    document.getElementById( 'myID' ).onclick = myidEvent;
}
function myidEvent() {
    alert( '押されました' );
}