JavaScript HTML DOM イベント
イベント
イベントとは、クリック、ロード、マウスオーバーなど、ユーザーまたはブラウザ自体によって実行される特定のアクションです。
イベントは JavaScript と DOM の間の架け橋です。
あなたがそれをトリガーしたら、それを実行します - イベントが発生すると、そのハンドラー関数が呼び出され、対応する JavaScript コードが実行され、応答が返されます。
典型的な例には、ページが読み込まれるときにロード イベントがトリガーされ、ユーザーが要素をクリックするとクリック イベントがトリガーされます。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します:
onclick=JavaScript
HTML イベントの例:
ユーザーがマウスをクリックしたとき
ページが読み込み時
画像が読み込まれた時
マウスが要素の上に移動した時
入力フィールドが変更された時
HTMLフォームが送信された時
ユーザーがキープレスをトリガーした時
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</h1>
</body>
</html>イベントを割り当てるにはHTML 要素では、イベント属性を使用できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点击</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り当てることができます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<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>onload イベントと onunload イベント
onload イベントと onunload イベントは、ユーザーがページに出入りするときに発生します。
onload イベントを使用すると、訪問者のブラウザの種類とブラウザのバージョンを検出し、この情報に基づいて Web ページの正しいバージョンをロードできます。
onload イベントと onunload イベントを使用して Cookie を処理できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
function load(){
alert("页面加载完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>onchange イベント
onchange イベントは、入力フィールドの検証と組み合わせてよく使用されます。
<!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>onmouseover および onmouseout イベント
onmouseover および onmouseout イベントは、ユーザーのマウスが 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:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠标请移动至此"
}
</script>
</body>
</html>onmousedown、onmouseup、onclick イベント
onmousedown、onmouseup、onclick は、マウス クリック イベントのすべての部分を構成します。まず、マウス ボタンがクリックされると onmousedown イベントが発生し、マウス ボタンが放されると onmouseup イベントが発生し、最後にマウスのクリックが完了すると onclick イベントが発生します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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
フォーカスを取得したときに入力フィールドの背景色を変更します。
マウスイベント
ポインターが要素上を移動すると色が変わり、ポインターがテキストの外に出ると再び色が変わります。
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
