JavaScript HTML DOM イベント
イベント
イベントとは、クリック、ロード、マウスオーバーなど、ユーザーまたはブラウザ自體によって実行される特定のアクションです。
イベントは JavaScript と DOM の間の架け橋です。
あなたがそれをトリガーしたら、それを?qū)g行します - イベントが発生すると、そのハンドラー関數(shù)が呼び出され、対応する JavaScript コードが実行され、応答が返されます。
典型的な例には、ページが読み込まれるときにロード イベントがトリガーされ、ユーザーが要素をクリックするとクリック イベントがトリガーされます。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を?qū)g行できます。
ユーザーが要素をクリックしたときにコードを?qū)g行するには、HTML イベント屬性に JavaScript コードを追加します:
onclick=JavaScript
HTML イベントの例:
ユーザーがマウスをクリックしたとき
ページが読み込み時(shí)
畫像が読み込まれた時(shí)
マウスが要素の上に移動(dòng)した時(shí)
入力フィールドが変更された時(shí)
HTMLフォームが送信された時(shí)
ユーザーがキープレスをトリガーした時(shí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊！</h1>
</body>
</html>イベントを割り當(dāng)てるにはHTML 要素では、イベント屬性を使用できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">點(diǎn)擊</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り當(dāng)てることができます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
</head>
<body>
<button id="myBtn">點(diǎn)這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>onload イベントと onunload イベント
onload イベントと onunload イベントは、ユーザーがページに出入りするときに発生します。
onload イベントを使用すると、訪問(wèn)者のブラウザの種類とブラウザのバージョンを検出し、この情報(bào)に基づいて Web ページの正しいバージョンをロードできます。
onload イベントと onunload イベントを使用して Cookie を処理できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function load(){
alert("頁(yè)面加載完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>onchange イベント
onchange イベントは、入力フィールドの検証と組み合わせてよく使用されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>當(dāng)你離開(kāi)輸入框后，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
</html>onmouseover および onmouseout イベント
onmouseover および onmouseout イベントは、ユーザーのマウスが HTML 要素の上または外に移動(dòng)したときに関數(shù)をトリガーするために使用できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠標(biāo)請(qǐng)移動(dòng)至此"
}
</script>
</body>
</html>onmousedown、onmouseup、onclick イベント
onmousedown、onmouseup、onclick は、マウス クリック イベントのすべての部分を構(gòu)成します。まず、マウス ボタンがクリックされると onmousedown イベントが発生し、マウス ボタンが放されると onmouseup イベントが発生し、最後にマウスのクリックが完了すると onclick イベントが発生します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>その他のイベント:
onmousedown および onmouseup
ユーザーがマウス ボタンを押したときに畫像を変更します。
onload
ページの読み込みが完了すると、プロンプト ボックスが表示されます。
onfocus
フォーカスを取得したときに入力フィールドの背景色を変更します。
マウスイベント
ポインターが要素上を移動(dòng)すると色が変わり、ポインターがテキストの外に出ると再び色が変わります。
![[クラウド サーバー學(xué)習(xí)] Webhook 自動(dòng)展開(kāi)ブログ](https://img.php.cn/upload/course/000/000/041/61e515d5eed45156.jpg)
