DOM イベント
HTML DOM は、JavaScript に HTML イベントに反応する機能を提供します。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します:
HTML イベントの例:
ユーザーがマウスをクリックしたとき
Webページが読み込まれたとき
画像が読み込まれたとき
マウスが要素の上に移動したとき
入力フィールドが変更されたとき
HTMLフォームが送信されたとき
-
ユーザーがキー押下をトリガーすると
この例では、ユーザーが <h1> 要素をクリックすると、その内容が変更されます:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
Run Instance»
Clickオンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
この例では、イベント ハンドラーから関数を呼び出します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしますインスタンス
HTML イベントのプロパティ
イベントを HTML 要素に割り当てるには、event 属性を使用できます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</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要素に割り当てることができます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</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>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして、オンラインインスタンス
上記の例では、id=myButn"のHTML要素にdisplayDateという関数が割り当てられています。
ボタンがクリックされるとJavaScript関数が実行されます。
onloadイベントとonunloadイベント
onload onunload イベントは、ユーザーがページに出入りするときに発生します。
onload イベントは、訪問者のブラウザの種類とブラウザのバージョンを検出し、この情報に基づいて Web ページの正しいバージョンをロードするために使用できます。 onunload イベントを使用して Cookie を処理できます
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</p>
</body>
</html>オンライン インスタンスを表示するには、[インスタンスを実行] ボタンをクリックします
onchange イベント
onchange イベントは、入力フィールドの検証と組み合わせてよく使用されます。
onchange の使用方法の例を次に示します。ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。 Instance
例
簡単なonmouseover-onmouseoutの例:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>ありがとうございます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
入力フィールドにフォーカスが当たったら、背景色を変更します。
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>
<body onload="mymessage()"></body>
</html>インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
ポインターが要素上に移動すると、ポインターが移動すると色が変わります。テキストの色を変更すると、再び変わります。
インスタンスrreee
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
