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


<!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>


外部ファイルとして「.js」ファイルを読み込む場合

<!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( '押されました' );
}

変数で短く記述


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
myElement=document.getElementById('myid'); //変数の定義
myElement.style.color='#ff0000';
myElement.style.backgroundColor='#ccc';
myElement.style.width='500px';
myElement.style.height = '100px';
</script>	
</body>
</html>

簡易化する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
myStyle = document.getElementById( 'myid' ).style; //変数の定義
myStyle.color='#ff0000';
myStyle.backgroundColor='#ccc';
myStyle.width = '500px';
myStyle.height = '100px';
</script>	
</body>
</html>