什么是事件？
时间是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数作出响应，也称为 绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法 元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
事件调用函数：要做什么事
注意：1.事件类型要加引号
2.函数是点击之后再去执行，每次点击都会执行一次
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<button>点击</button>
? ?<script>
? ? ? ?//需求：点击了按钮，弹出一个对话框
? ? ? ?//1.事件源：按钮
? ? ? ?//2.事件类型：点击鼠标
? ? ? ?//3.事件处理程序：弹出对话框
? ? ? ?const btn = document.querySelector('button')
? ? ? ?btn.addEventListener('click', function () {
? ? ? ? ? ?alert('你早呀')
? ? ? })
? ?</script>
</body>
?
</html>随机点名案例
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<h2>随机点名</h2>
? ?<div class="box">
? ? ? ?<span>名字是：</span>
? ? ? ?<div class="qs">这里显示姓名</div>
? ?</div>
? ?<div class="btns">
? ? ? ?<button class="start">开始</button>
? ? ? ?<button class="end">结束</button>
? ?</div>
?
? ?<script>
? ? ? ?let timerId
? ? ? ?//数据数组
? ? ? ?const arr = ['曹鑫宇', '汪文斌', '左孝云', '康硕涵', '吴桐雨', '张艺乐', '潘奥', '韩乐', '徐书豪', '马腾飞']
? ? ? ?const qs = document.querySelector('.qs')
? ? ? ?//1.获取开始按钮对象
? ? ? ?const start = document.querySelector('.start')
? ? ? ?start.addEventListener('click', function () {
? ? ? ? ? ?timerId = setInterval(function () {
? ? ? ? ? ? ? ?//随机数
? ? ? ? ? ? ? ?const random = parseInt(Math.random() * arr.length)
? ? ? ? ? ? ? ?qs.innerHTML = arr[random]
? ? ? ? ? ? ? ?//console.log(arr[random]);
?
? ? ? ? ? }, 35)
? ? ? })
? ? ? ?//2.获取结束按钮对象
? ? ? ?const end = document.querySelector('.end')
? ? ? ?end.addEventListener('click', function () {
? ? ? ? ? ?clearInterval(timerId)
? ? ? })
? ?</script>
</body>
?
</html>事件监听版本
DOM L0
事件源.on事件=function( ){ }
DOM L2
事件源.addEventListener(事件，事件处理函数)
区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有时间更多特性，推荐使用
鼠标事件：鼠标触发、click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开
焦点事件（表单获得光标）：focus获得焦点、blur失去焦点
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<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;
? ? ? }
?
? ? ? ?.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 {
? ? ? ? ? ?display: none;
? ? ? ? ? ?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>
? ? ? ?//1.获取元素
? ? ? ?const input = document.querySelector('[type=search]')
? ? ? ?const ul = document.querySelector('.result-list')
? ? ? ?//2.监听事件 焦点
? ? ? ?input.addEventListener('focus', function () {
? ? ? ? ? ?ul.style.display = 'block'
? ? ? ? ? ?input.classList.add('search')
? ? ? })
? ? ? ?//3.监听事件 失去焦点
? ? ? ?input.addEventListener('blur', function () {
? ? ? ? ? ?ul.style.display = 'none'
? ? ? ? ? ?input.classList.remove('search')
? ? ? })
? ?</script>
</body>
?
</html>键盘事件（键盘触发）：Keydown键盘按下触发、Keyup键盘抬起触发
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<input type="text">
? ?<script>
? ? ? ?const input = document.querySelector('input')
? ? ? ?input.addEventListener('keydown', function () {
? ? ? ? ? ?console.log('键盘按下了');
? ? ? })
? ? ? ?input.addEventListener('keyup', function () {
? ? ? ? ? ?console.log('键盘弹起了');
? ? ? })
</body>
?
</html>文本事件（表单输入触发）：input用户输入事件
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<input type="text">
? ?<script>
? ? ? ?//用户输入文本事件
? ? ? ?const input=document.querySelector('input')
? ? ? ?input.addEventListener('input',function(){
? ? ? ? ? ?console.log(input.value);
? ? ? })
? ?</script>
</body>
?
</html>获取事件对象
语法：如何让获取
（1）在事件绑定的回调函数的第一个参数就是事件对象
（2）一般命名为event、ev、e
元素.addEventListener('click',function(事件对象名){ })
事件对象常用属性
（1）type:获取当前的事件类型
（2）clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
（3）offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
（4）key:用户按下的键盘的值，现在不提倡使用keyCode
小知识点：对象名.trim() 去除文本空格
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<script>
? ? ? ?const str = ' ? ? pink '
? ? ? ?console.log(str.trim());
? ?</script>
</body>
?
</html>目标：能够判断函数运行在不同环境中this所指代的对象
环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
谁调用，this就是谁
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
?
<body>
? ?<button>点击</button>
? ?<script>
? ? ? ?const btn = document.querySelector('button')
? ? ? ?btn.addEventListener('click', function () {
? ? ? ? ? ?//console.log(this);
? ? ? ? ? ?this.style.color='red'
? ? ? })
? ?</script>
</body>
?
</html>如果将函数A做为参数传递给函数B时，我们称函数A为回调函数
复选框案例
<!DOCTYPE html>
<html lang="en">
?
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</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>
? ? ? ?//获取大复选框
? ? ? ?const ckA = document.querySelector('#checkAll')
? ? ? ?//获取所有小复选框
? ? ? ?const ck = document.querySelectorAll('.ck')
? ? ? ?//添加对勾事件
? ? ? ?ckA.addEventListener('click', function () {
? ? ? ? ? ?for (let i = 0; i < ck.length; i++) {
? ? ? ? ? ? ? ?//ck[i].checked = ckA.checked
? ? ? ? ? ? ? ?ck[i].checked = this.checked
? ? ? ? ? }
? ? ? })
? ? ? ?//小复选框控制大复选框
? ? ? ?for (let i = 0; i < ck.length; i++) {
? ? ? ? ? ?ck[i].addEventListener('click', function () {
? ? ? ? ? ? ? ?//获取小复选框当前被勾选的个数
? ? ? ? ? ? ? ?//console.log(document.querySelectorAll('.ck:checked').length===ck.length);
? ? ? ? ? ? ? ?ckA.checked=document.querySelectorAll('.ck:checked').length===ck.length
? ? ? ? ? })
? ? ? }
? ?</script>
</body>
?
</html>