event
(
1
) What is an event?
An event is an action
or something that happens within the system during programming , such as a user clicking a button
on a web page
(
2
) What is event monitoring?
It is to let the program detect whether an event is generated, and once an event is triggered, it will immediately call a function to respond, also known as
registration
event
(3)
Three elements of event monitoring:
ØEvent
source: the
dom
element is triggered by the event, to get
the dom
element
ØEvent
: What method is used to trigger, such as mouse
click
, mouseover
,
etc.
ØThe
function called by the event: what to do
(4) Event type:
1. Mouse events: click, mousecenter, mouseleave
2. Focus events: focus (get focus), blur (lose focus)
3. Keyboard events: keydown (triggered by pressing the keyboard), keyup (triggered by lifting the keyboard)
4. Text event: input (triggered by user input)
case:
1.
Xiaomi search box example
Requirement: When the form gets the focus, the drop-down menu is displayed, and the menu is hidden when the focus is lost
analyze:
①
: The start drop-down menu needs to be hidden
②
: When the form gets the
focus
, the drop-down menu is displayed, and the text box changes color (add class)
③
: The form loses focus, reverse operation
code:
<!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>
Effect:
2.
Case of selecting all text boxes
Requirements: When the user clicks Select All, all the check boxes below are selected, and if all are unselected, all are canceled
, and
the text changes accordingly
code:
<!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>
Renderings:
The above two cases are relatively basic applications. After learning about event acquisition and modification, there will be many rich and interesting cases that can be realized.