事件
事件：用户执行的操作
语法
元素.addEVentListener('事件'，要执行的函数)
事件监听
监听用户是否进行了某个操作
事件源（谁被触发了）
事件类型（用什么方式触发，点击还是鼠标经过等）
事件处理程序（要做什么事情）
事件处理函数
如果监听到用户真的进行某个操作，我们就进行相应处理
补充
我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，而是事件处理机制监听到事件触发之后再调用的
事件类型
click:鼠标单击
dblclick:鼠标双击
mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发
mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发
keydown:按键按下自动触发
keyup:按键松开自动触发
focus:文本框聚焦事件，文本框获取焦点，焦点就是光标点
blur:文本框失焦事件，只要失焦就会触发，不关注内容是否变化
input:文本输入框内容变化时，只要内容变化就会触发
change:普通的输入框：内容改变同时失焦；对于file:文件选择完毕之后
事件的其他绑定方式
语法
元素.on类型 = 处理函数
案例
<button>点我啊</button>
<script>
let btn = document.querySelector('button')
btn.onclick = function() {
console.log(123)
}
// 如果为元素重复绑定同一个事件，那么后面绑定的事件将前面绑定的事件覆盖--不允许为元素绑定同名事件
btn.onclick = function() {
console.log(456)
}
</script>
综合案例
随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>05-随机点名-进阶版</title>
<style>
p {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>这里显示名字</p>
<button class="start">开始随机点名</button>
<button class="end">结束随机点名</button>
<script>
// <!-- 模拟数据 -->
let arr = ['刘备', '关羽', '张飞', '赵云', '马超', '黄忠']
// 获取三个元素
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let p = document.querySelector('p')
let timeId
let index
// 绑定单击事件，对随机获取名字进行渲染
start.addEventListener('click', function () {
// 添加定时器
timeId = setInterval(function () {
// 生成一个随机索引
index = parseInt(Math.random() * arr.length)
// 根据索引获取名字
let name = arr[index]
// 渲染到p元素
p.innerText = name
}, 100)
})
// 绑定单击事件，对结束标签进行渲染
end.addEventListener('click', function () {
// 关闭定时器
clearInterval(timeId)
// 删除元素
arr.splice(index, 1)
})
</script>
</body>
</html>
购物车加减案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>11-购物车加减操作</title>
<style>
div {
width: 80px;
}
input[type='text'] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type='button'] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" />
</div>
<script>
// 获取元素
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
// 为+号做绑定单击事件
add.addEventListener('click', function () {
// 获取输入框的数量
let count = total.value
// 每次单击都可以数量+1
count++
// 重新赋值给输入框
total.value = count
// 单击时，将-号的禁用按钮解除
reduce.disabled = false
})
// 为-号做绑定单击事件
reduce.addEventListener('click', function () {
// 获取输入框的数量
let count = total.value
// 每次单击都可以数量+1
count--
// 重新赋值给输入框
total.value = count
// 判断数量是否等于1,如果是1则禁用按钮
if (count === 1) {
reduce.disabled = true
}
})
</script>
</body>
</html>
全选反选案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-全选反选案例</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 获取元素
let all = document.querySelector('.all')
let checkAll = document.querySelector('#checkAll')
let ck = document.querySelectorAll('.ck')
// console.log(all, checkAll, ck);
// 让全选复选框与其它复选框状态相等
// 给全选复选框绑定单击事件
checkAll.addEventListener('click', function () {
// 获取当前全选复选框经过绑定状态后的状态
let state = checkAll.checked
// 伪数组需要遍历，将全选复选框的状态赋值给其它复选框，达成状态相等
ck.forEach(function (ele, index) {
ele.checked = state
})
// 设置文本内容
// 如果是全选状态，就是取消，否则是全选
all.innerText = state ? '取消' : '全选'
})
// 遍历每一个复选框
for (let i = 0; i < ck.length; i++) {
// 为每一个复选框绑定单击事件
ck[i].addEventListener('click', function () {
// 声明一个变量值 假设全选复选框的状态为选中
let flag = true
// 循环遍历其它复选框
ck.forEach(function (v, i) {
// 判断，当每个复选框的状态没有全部选中，全选复选框的状态也不会选中
if (v.checked === false) {
flag = false
}
})
// 将是否全选中的状态赋值给全选复选框
checkAll.checked = flag
})
}
</script>
</body>
</html>
