イベント
(
1
) イベントとは何ですか?
イベントとは、ユーザーがWeb ページ上のボタンをクリックするなど、プログラミング中にシステム内で発生する
アクションまたは何かです。
(
2
) イベント監視とは何ですか?
これは、プログラムにイベントが生成されたかどうかを検出させ、イベントがトリガーされると、すぐに応答する関数を呼び出します (
登録
イベントとも呼ばれます)。
(3)
イベント監視の 3 つの要素:
Øイベント
ソース:
dom
要素はイベントによってトリガーされ、
dom
要素を取得します。
ØEvent
: トリガーに使用されるメソッド (マウス
クリック
、マウスオーバー
など
) 。
Ø
イベントによって呼び出される関数: 実行する内容
(4) イベントの種類:
1. マウスイベント: click、mousecenter、mouseleave
2. フォーカス イベント: フォーカス (フォーカスを取得)、ブラー (フォーカスを失う)
3. キーボード イベント: keydown (キーボードを押すことによってトリガーされる)、keyup (キーボードを持ち上げることによってトリガーされる)
4. テキスト イベント: 入力 (ユーザー入力によってトリガーされます)
場合：
1.
Xiaomi 検索ボックスの例
要件: フォームがフォーカスを取得すると、ドロップダウン メニューが表示され、フォーカスを失うとメニューが非表示になります。
分析します:
①
: 開始ドロップダウン メニューを非表示にする必要があります
②
: フォームにフォーカスが当たる
と
ドロップダウンメニューが表示され、テキストボックスの色が変わります（クラスの追加）
③
: フォームがフォーカスを失い、逆の操作が行われます。
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
display: none;
}
.a {
display: block;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本" />
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
let inputEle = document.querySelector("input")
let ulEle = document.querySelector(".result-list")
inputEle.addEventListener("focus", function () {
ulEle.classList.add("a")
console.log("11111")
})
inputEle.addEventListener("blur", function () {
ulEle.classList.remove("a")
})
</script>
</body>
</html>効果：
2.
テキストボックスを全選択した場合
要件: ユーザーが [すべて選択] をクリックすると、以下のチェック ボックスがすべてオンになり、すべてがオフの場合はすべてキャンセルされ
、
それに応じてテキストが変更されます。
コード：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
<span class="a">全选</span>
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
let all = document.querySelector("#j_cbAll")
let a = document.querySelectorAll("#j_tb input")
let f = document.querySelector(".a")
all.addEventListener("change", function () {
if (all.checked == false) {
f.innerHTML = "全选"
}
else {
f.innerHTML = "取消"
}
let change = all.checked
for (let i = 0; i < a.length; i++) {
a[i].checked = change
}
})
for (let i = 0; i < a.length; i++) {
a[i].addEventListener("change", function () {
let c = document.querySelectorAll("#j_tb input:checked")
if (c.length == a.length) {
all.checked = true;
f.innerHTML = "取消"
}
else {
all.checked = false;
f.innerHTML = "全选"
}
})
}
</script>
</body>
</html>レンダリング:
上記の 2 つのケースは比較的基本的なアプリケーションですが、イベントの取得と変更について学習すると、豊富で興味深いケースが数多く実現できるようになります。