について考えるページ イベント
: HTML ページはどのような順序で読み込まれるでしょうか?
回答: ページは、コードが書かれた順序で上から下にロードされます。
発生する可能性がある問題: ページが読み込まれる前に JavaScript を使用して DOM 要素を操作すると、構文エラーが発生します。
解決策: ページ イベントによって JavaScript コードの実行タイミングが変更される可能性があります。
フォーカス イベント
Web 開発では、フォーカス イベントは主にフォーム検証機能に使用され、最も一般的に使用されるイベントの 1 つです。
たとえば、テキスト ボックスがフォーカスを取得したときにテキスト ボックスのスタイルを変更したり、テキスト ボックスがフォーカスを失ったときにテキスト ボックスに入力されたデータを検証したりするなどです。
フォーカス イベントの使用方法を誰もがよく理解できるように、ユーザー名とパスワードが空かどうかを確認するデモを以下に示します。
コードの実装
<!DOCTYPE html>
<頭>
<meta charset="UTF-8">
<title>ユーザー名とパスワードが空であることを確認します</title>
<スタイル>
本文{背景:#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin:0 auto;text-align:center;}
.btn{幅:180px;高さ:40px;背景:#3388ff;ボーダー:1px 無地 #fff;カラー:#fff;フォントサイズ:14px;}
.ipt{幅:260px;パディング:4px 2px;}
.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1pxソリッド#ccc;display:none;line-height:30px;padding-left:20px;font-サイズ:13px;}
</スタイル>
</head>
<本文>
<p id="tips" class="tips"></p>
<p class="box">
<p><label>ユーザー名: <input id="user" class="ipt" type="text"></label></p>
<p><label>パスワード: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">ログイン</button></p>
</p>
<スクリプト>
window.onload = function() {
addBlur($('user')); // user の ID を持つ要素がフォーカスを失った後、値が空かどうかを確認します。 addBlur($('pass')); // 要素の値が空であるかどうかを確認します。パスの ID がフォーカスを失うかどうか。
function $(obj) { // ID に基づいて指定された要素を取得します return document.getElementById(obj);
}
function addBlur(obj) { // 指定された要素のフォーカス喪失イベントを追加します obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // フォームが空かどうかをチェック if (obj.value === '') {
$('ヒント').style.display = 'ブロック';
$('tips').innerHTML = '注: 入力内容を空にすることはできません。
} それ以外 {
$('ヒント').style.display = 'なし';
}
}
</script>
</body>
</html>マウス イベント
マウス イベントは、Web 開発で最も一般的に使用されるイベントです。
たとえば、マウスをスライドさせたときにタブ バーに表示されるコンテンツを切り替える、マウスを使用してステータス ボックスをドラッグして表示位置を調整する、などです。これらの一般的な Web ページ効果はすべてマウス イベントを使用します。
プロジェクト開発では、一般的に使用されるいくつかのマウス属性が関係することが多く、これらは現在のマウス位置情報を取得するために使用されます。
pageX 属性と pageY 属性は、IE6 ～ 8 ブラウザでは互換性がありません。そのため、プロジェクト開発時にはIE6～8ブラウザとの互換性が必要となります。
ドキュメント内のマウスの座標は、現在のウィンドウ内のマウスの座標に、スクロール バーによって回転されるテキストの長さを加えたものと等しくなります。
マウス イベントの使用法をよりよく理解してもらうために、マウス クリック位置の円形表示を例に挙げてみましょう。
コードの実装
<!DOCTYPE html>
<頭>
<meta charset="UTF-8">
<title>マウスのクリック位置を表示</title>
<スタイル>
.mouse{位置:絶対;背景:#ffd965;幅:40px;高さ:40px;境界半径:20px;}
</スタイル>
</head>
<本文>
<p id="mouse" class="mouse"></p>
<スクリプト>
var マウス = document.getElementById('mouse');
//要件: ページ上でマウスがクリックされたときに、クリック位置を取得し、小さなドットを表示します document.onclick = function(event) {
// イベントオブジェクトの互換処理を取得 varevent =event ||
// ページ上のマウスの位置 var pageX =event.pageX || document.documentElement.scrollLeft;
var pageY = イベント.ページY || イベント.clientY + document.documentElement.scrollTop;
// <p> を表示する位置を計算します var targetX = pageX - Mouse.offsetWidth / 2;
var targetY = pageY - マウス.オフセット高さ / 2;
// マウスをクリックした位置に<p>を表示します
Mouse.style.display = 'ブロック';
Mouse.style.left = targetX + 'px';
Mouse.style.top = targetY + 'px';
};
</script>
</body>
</html> 【事例】マウスドラッグ効果
盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。
例を挙げてください
コード実装のアイデア:
① HTML を記述し、ドラッグ アンド ドロップ効果を実装するポップアップ ボックスをデザインします。
②ドラッグバーにmousedownイベントとそのハンドラを追加します。
③ マウス移動イベントを処理して、マウスのドラッグ効果を実現します。
④ マウスボタンを放したときのイベントを処理し、マウスボタンを放した後にポップアップボックスが動かなくなるようにします。
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>マウスドラッグ</title>
<スタイル>
本文{マージン:0}
.box{幅:400px;高さ:300px;ボーダー:5px ソリッド #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{幅:100%;高さ:25px;背景色:#7c9299;ボーダー下:1px 実線 #369;線の高さ:25px;色:#fff;カーソル:移動}
#box_close{フロート:右;カーソル:ポインタ}
</スタイル>
</head>
<本文>
<p id="box" class="box">
<p id="drop" class="hd">
登録情報（ドラッグ＆ドロップ可能）
<span id="box_close">【閉じる】</span>
</p>
<p class="bd"></p>
</p>
<スクリプト>
// ドラッグされたボックスとドラッグ ストリップを取得します var box = document.getElementById('box');
vardrop = document.getElementById('drop');
drop.onmousedown = function(event) { // ドラッグ バー上でマウスを押してボックスをドラッグします。 varevent =event ||
// マウスが押されたときの位置を取得します。 var pageX =event.pageX || document.documentElement.scrollLeft;
var pageY = イベント.ページY || イベント.clientY + document.documentElement.scrollTop;
// ボックスからマウスクリック位置の位置を計算 var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // マウスが移動すると、ボックス全体がマウスの位置に従います。
// 移動後のマウスの位置を取得します var pageX =event.pageX || document.documentElement.scrollLeft;
var pageY = イベント.ページY || イベント.clientY + document.documentElement.scrollTop;
// 移動後のボックスの位置を計算して設定します box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {//マウスボタンを離したときにボックスの移動をキャンセルします document.onmousemove = null;
};
</script>
</body>
</html>キーボード イベント
キーボード イベントは、ユーザーがキーボードを使用したときにトリガーされるイベントを指します。
例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。
以下に Enter キーの切り替えの使用例を示します。詳細は例に示すとおりです。
コードの実装
<!DOCTYPE html>
<頭>
<meta charset="UTF-8">
<title>Enter キーを押して切り替えます</title>
</head>
<本文>
<p>ユーザー名: <input type="text"></p>
<p>電子メール: <input type="text"></p>
<p>携帯電話番号: <input type="text"></p>
<p>個人的な説明: <input type="text"></p>
<スクリプト>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = function(e) {
// イベントオブジェクトの互換処理を取得 var e =event || window.event;
// 押されたキーが Enter かどうかを判断します。そうであれば、次の入力にフォーカスを取得します if (e.keyCode === 13) {
// すべての入力ボックスを走査し、現在の入力の添字を見つけます。 (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) {
// 次の入力要素のインデックスを計算します varindex = i + 1 >= inputs.length 0 : i + 1;
壊す;
}
}
// 次の入力がまだテキスト ボックスの場合、キーボード フォーカスを取得します if (inputs[index].type === 'text') {
inputs[index].focus(); // フォーカスイベントをトリガーします }
}
};
}
</script>
</body>
</html>キープレスイベントで保存されているキー値は
ASCIIコードであり、
キーダウンイベントとキーアップイベントで保存されているキー値は仮想キーコードです。
詳細はMDNなどのマニュアルを参照してください。
フォーム
イベントとは、Webフォームを操作する際に発生するイベントのことです。
例えば、フォーム送信前の検証やフォームリセット時の確認操作などです。 JavaScript は、関連するフォーム イベントを提供します。
以下に、例としてフォームデータを送信およびリセットするかどうかを示します。詳細は例に示すとおりです。
コードの実装
<!DOCTYPE html>
<頭>
<meta charset="UTF-8">
<title>フォームイベント</title>
</head>
<本文>
<form id="登録">
<label>ユーザー名: <input id="user" type="text"></label>
<input type="submit" value="Submit">
<input type="reset" value="リセット">
</form>
<スクリプト>
// 検証が必要なフォームおよび要素オブジェクトを取得します var regist = document.getElementById('register');
var user = document.getElementById('user');
regist.onsubmit = function(event) { // フォームに送信イベントを追加します // イベント オブジェクトを取得し、現在のイベント タイプを出力します varevent =event ||
コンソール.ログ(イベント.タイプ);
// フォーム要素の内容が空かどうかを判断し、空の場合は false を返し、そうでない場合は true を返します。
ユーザーの値を返しますか? true : false;
};
regist.onreset = function (event) { // フォームにリセット イベントを追加します。 // イベント オブジェクトを取得し、現在のイベント タイプを出力します。 varevent =event ||
コンソール.ログ(イベント.タイプ);
// リセットを確認するかどうかを決定します。「OK」を押すと true が返され、「キャンセル」を押すと false が返されます。
確認の確認（ '情報をリセットするかどうかを確認してください。リセット後、フォームに充填されたすべてのコンテンツがクリアされます」）;
};
</script>
</body>
</html>実践的な
画像拡大効果
分析 画像拡大効果の実装方法:
① 同じ画像を 2 枚、小さい画像と大きい画像を用意します。
②商品表示エリアにサムネイルが表示されます。
③ 大きい画像は、小さい画像上でマウスを移動すると、大きい画像内の対応する領域が比例して表示されます。
コード実装のアイデア:
① 小さな画像、マウスを隠すマスク、および大きな画像を表示する HTML ページを作成します。
② 小さい画像上でマウスを動かすと、マウスマスクと大きい画像が表示されます。
③マウスを動かすと小さい絵の中のマスクも動きます。
④小画像内のマスクの可動範囲を制限します。
⑤ 小さい画像のマスクの範囲に基づいて大きい画像を比例表示します。