Day2 WebAPIs:事件、环境对象、回调函数

2023-12-28 19:39:50

2.事件、环境对象、回调函数

什么是事件？

时间是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数作出响应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

2.1 事件监听（绑定）

语法元素对象.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方式可绑定多次，拥有时间更多特性，推荐使用

2.2 事件类型

鼠标事件：鼠标触发、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>

2.3 事件对象

获取事件对象

语法：如何让获取

（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>

2.4 环境对象

目标：能够判断函数运行在不同环境中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>

2.5 回调函数

如果将函数A做为参数传递给函数B时，我们称函数A为回调函数

2.6 综合案例

复选框案例

<!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>

文章来源:https://blog.csdn.net/2301_76534754/article/details/135229569
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！