JavaScript HTML DOM イベント
JavaScript HTML DOM イベント
HTML DOM は、JavaScript に HTML イベントに反応する機能を提供します。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します:
onclick=JavaScript
HTML イベントの例:
ユーザーがマウスをクリックしたとき ページが読み込まれたとき 画像が読み込まれたときロードされたとき マウスが要素上に移動したとき 入力フィールドが変更されたとき HTML フォームが送信されたとき ユーザーがキー押下をトリガーしたとき
この場合、ユーザーがクリックすると、<h1> の内容が変更されます。要素:
<!doctype html> <html> <meta charset="utf-8"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1 onclick="this.innerHTML='hello!'">点我点我点我!</h1> </body> </html>
この場合、関数はイベント ハンドラーから呼び出されます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本！</h1>
</body>
</html>HTML イベント属性
HTML 要素にイベントを割り当てるには、event 属性を使用できます。
onclick イベントをボタン要素に割り当てます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>上の例では、ボタンがクリックされると、displayDate という名前の関数が実行されます。
HTML DOM を使用してイベントを割り当てる
HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り当てることができます:
onclick イベントをボタン要素に割り当てます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button id="myBtn">试一试</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イベントとonunloadイベントは、ユーザーがページに出入りするときにトリガーされます。
onloadイベントは次の目的で使用できます。この情報に基づいて、訪問者のブラウザの種類とバージョンを確認し、
onload イベントを使用して Cookie を処理できます。
onchange イベントは、入力フィールドの検証によく使用されます。
次の例は、ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。onmouseout イベントを使用して関数をトリガーできます。マウス ポインターが要素に移動したり、要素から離れたりします。単純な onmouseover-onmouseout の例:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>onmousedown、onmouseup、および onclick イベント
Onmousedown、onmouseup、onclick イベントは、マウス クリックのプロセス全体です。まず、マウス ボタンがクリックされると、onmousedown イベントがトリガーされ、次にマウス ボタンが放されると、onmouseup イベントがトリガーされます。最後に、マウスのクリックが完了すると、onclick イベントがトリガーされます。
単純な onmousedown-onmouseup の例:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>
