HTML DOM - イベント

HTML DOM を使用すると、JavaScript が HTML イベントに反応できるようになります。

イベントに反応する

ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を実行できます。

ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します:

onclick=JavaScript

HTML イベントの例:

ユーザーがマウスをクリックしたとき
Webページが読み込まれたとき
画像が読み込まれたとき
マウスが要素の上に移動したとき
入力フィールドが変更されたとき
HTMLフォームが送信されたとき
ユーザーがキーを押すと

この例では、ユーザーがクリックすると、<h1>要素の内容が変更されます:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

Run Instance»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

この場合、関数はイベントハンドラーから呼び出されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックしますオンラインインスタンスを表示するには

HTML イベント属性

HTML 要素にイベントを割り当てるには、イベント属性を使用できます。

インスタンス

<!DOCTYPE html>
<html>
<html>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button onclick="displayDate()">Try it</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

上の例では、ボタンをクリックすると、displayDateという名前の関数が実行されます。

HTML DOMを使用してイベントを割り当てる

HTML DOMを使用すると、JavaScriptを使用してイベントをHTML要素に割り当てることができます:

インスタンス

<html><!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして、オンラインインスタンス

上の例では、displayDate という名前の関数が、id=myButn" の HTML 要素に割り当てられています。

この関数は、ボタンがクリックされたときに実行されます。

onload イベントと onunload イベント

ユーザーがページに出入りする

onload イベントを使用して訪問者のブラウザの種類とバージョンを確認し、この情報に基づいて Web ページのさまざまなバージョンをロードできるようにすることができます

インスタンス

<html><!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>

インスタンスを実行する»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

onchange イベント

onchange イベントは、入力フィールドの検証によく使用されます。

次の例は、onchange の使用方法を示しています。ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

onmouseoverイベントとonmouseoutイベント

onmouseoverイベントとonmouseoutイベントを使用して、マウスポインターが移動したときにトリガーできます要素関数に移動したり、要素関数から離れたりします。

インスタンス

<html><!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

インスタンスを実行する »

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

onmousedown、onmouseup、onclickイベント

onmousedown、onmouseup、onclickイベントはプロセス全体ですマウスのクリック。まず、マウスボタンがクリックされると、onmousedown イベントがトリガーされ、次にマウスボタンが放されると、onmousedown イベントがトリガーされます。 onmouseup イベントが発生し、最後にマウスのクリックが完了すると、onclick イベントがトリガーされます。

例

<html><!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>

</body>
</html>

例の実行»

オンライン例を表示するには、「例の実行」ボタンをクリックしてください