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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
