如何快速入门VUE3.0：进入学习
相关推荐：javascript教程
页面事件
思考：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) {
//イベントオブジェクトの互換性のある処理を取得=イベント||
// ページ上のマウスの位置 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> [case]マウスドラッグ効果
ボックスの位置（左値と上部値）=マウスの位置（左値と上部値） - マウスが押されたときのマウスとボックスの間の距離（左と上部値）。
例を挙げてください
コード実装のアイデア:
① 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）{//ドラッグバーのマウスを押して、ボックスvar event = event || 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> e-mail：<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 = "Register">
<label> username：<入力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）{//フォームに送信イベントを追加します//現在のイベントタイプvar event || window.eventを出力します。
console.log（event.type）;
//フォーム要素コンテンツが空である場合、falseを返し、それ以外の場合はtrueを返します
return user.value？
};
regist.onreset = function（event）{//イベントオブジェクトを取得し、現在のイベントタイプvar event = event || event.event;
console.log（event.type）;
//リセットを確認するかどうかを決定し、「OK」を押してtrueを返し、「キャンセル」を押すとfals
確認の確認（ '情報をリセットするかどうかを確認してください。リセット後、フォームに充填されたすべてのコンテンツがクリアされます」）;
};
</script>
</body>
</html>画像拡大効果
の実践的な
分析: 画像拡大効果の実装方法:
2 つの同一の画像 (小さい画像と大きい画像) を準備します。
サムネイルは、製品のディスプレイエリアに表示されます。
大きな画像は、マウスが小さな画像の上に移動したときに、大きな画像内の対応する領域を比例して表示するために使用されます。
コード実装のアイデア：
htmlページを書き、小さな写真、マウスを隠すマスク、大きな写真を表示します。
mouseマウスが小さな画像を移動すると、マウスマスクと大きな画像が表示されます。
mouseマウスが動いたら、マスクを小さな絵で動かします。
bemallmemply small画像の可動範囲の移動可能な範囲を制限します。
bemall小さな画像のマスクのカバレッジに基づいて、大きな画像を比例して表示します。
関連する推奨事項：JavaScriptチュートリアル
上記は、5つの主要なJavaScriptイベントの詳細な分析です。
