一.事件介绍
事件是在编程中发生的动作或者发生的动作 （比如用户在网页上单击一个事件—）
能够给DOM元素添加事件监听
元素.addEventListener('事件'，要执行的函数)
事件监听（绑定事件 注册事件 事件侦听）三要素
事件源：那个dom元素被事件触发了要获取dom元素
事件：用什么方法触发，比如对点击事件
事件调用的函数：要做的事情
记得事件要加引号
函数是点击后再去执行，每次都会执行一次
关闭二维码小案例
<!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>关闭二维码</title>
<style>
div {
width: 300px;
height: 500px;
margin: 100px auto;
position: relative;
background-color: aqua;
}
img {
width: 100%;
height: 100%;
}
span {
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="../img/ouwenvx.jpg" alt="">
<span class="dianji">x</span>
</div>
</body>
<script>
// 获取元素
let dianji = document.querySelector('.dianji')
let wrap = document.querySelector('.wrap')
// 事件监听
dianji.addEventListener('click', function() {
wrap.style.display = 'none'
})
</script>
</html>
点击按钮随机显示一个名字如果没有显示则禁用按钮
<!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>
div {
display: inline-block;
border: 1px solid #333;
width: 100px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
抽中的选手
<div></div>
<button>点击点名</button>
</body>
<script>
let box = document.querySelector('div')
let btn = document.querySelector('button')
// 随机函数
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['欧文', '库里', '克莱', '威少', '詹姆斯', '乔治', '伦纳德', '莫兰特', '利拉德', '浓眉哥']
// 事件监听
btn.addEventListener('click', function() {
let random = getRandom(0, arr.length - 1)
document.getElementsByTagName('div')[0].innerHTML = arr[random]
// 删除数组里面的元素
arr.splice(random, 1)
// 如果数组里面只剩下最后一个就要禁用按钮
if (arr.length === 0) {
console.log('最后一个')
btn.disabled = true
btn.innerText = '已经抽完'
}
})
</script>
</html>
事件小案例NBA谁打球最好
<!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>点击开始随机抽取，点击结束输出结果</title>
<style>
.qs {
display: inline-block;
margin-bottom: 100px;
}
</style>
</head>
<h2>NBA谁打球最好</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示名字</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<body>
</body>
<script>
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['欧文', '库里', '克莱', '威少', '詹姆斯', '乔治', '伦纳德', '莫兰特', '利拉德', '浓眉哥']
// 获取元素
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let qs = document.querySelector('.qs')
// timer要是全局变量
let timer = 0
let random = 0
// 开始给开始按钮注册事件
start.addEventListener('click', function() {
// 随机抽数据---快速 间歇函数
timer = setInterval(function() {
let random = getRandom(0, arr.length - 1)
qs.innerHTML = arr[random]
}, 25)
// 如果到了最后一个就警用两个按钮
if (arr.length === 1) {
start.disabled = end.disabled = true
}
})
// 给结束按钮注册事件 本质是停止计时器
end.addEventListener('click', function() {
clearInterval(timer)
// 删除数组元素
arr.splice(ranodm, 1)
})
</script>
</html>
事件类型
1.鼠标事件
- 鼠标点击 click
- 鼠标离开mouseleave
- 鼠标经过mouseenter
2.焦点事件
- focus获得焦点
- blur失去焦点
3.键盘事件
- keydown键盘按下触发
- keyup 键盘抬起触发
4.文本事件
- input 用户输入事件
小米搜索框小案例
<!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>小米搜索框</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.mi {
width: 100px;
border: 1px solid #333;
}
input {
width: 100px;
}
.search {
background-color: pink;
}
.list {
display: none;
}
li {
border: 1px solid #333;
width: 100px;
height: 20px;
}
</style>
<!-- 当获得焦点下拉框失去焦点的时候隐藏 -->
</head>
<body>
<div class="mi">
<input type="text" name="" id="" placeholder="小米笔记本" class="server">
<ul class="list">
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
<li class="item">欧文</li>
</ul>
</div>
</body>
<script>
let server = document.querySelector('input')
let list = document.querySelector('.list')
// 事件监听 获得光标事件
server.addEventListener('focus', function() {
// 显示下拉菜单 文本框变色
list.style.display = 'block'
server.classList.add('search')
})
server.addEventListener('blur', function() {
// 隐藏下拉菜单 文本框变色remove
list.style.display = 'none'
server.classList.remove('search')
}
</script>
</html>
微博输入文字，可以计算输入字数
<!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>
</head>
<body>
<!-- 分析 1.判断用输入事件input 2.不断取得文本框内里面的字符长度-->
<div class="w">
<div class="controls">
</div>
<br>
<textarea name="" id="area" cols="30" rows="10" placeholder="说点什么把" maxlength="200"></textarea>
<div>
<span class="uescount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
</body>
<script>
// 获取元素
let area = document.querySelector('#area')
let uescount = document.querySelector('.uescount')
// 绑定事件
area.addEventListener('input', function() {
uescount.innerHTML = area.value.length
})
全选文本框案例（用户点击全选，则下面复选框全部选中，取消全选则全部取消，文字对应变化）
<!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>
</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="" id="check" class="ck">
</td>
<th>欧文</th>
<th>库里</th>
<th>克莱</th>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="checkA" class="ck">
</td>
<th>欧文</th>
<th>库里</th>
<th>克莱</th>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="checkA" class="ck">
</td>
<th>欧文</th>
<th>库里</th>
<th>克莱</th>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="checkA" class="ck">
</td>
<th>欧文</th>
<th>库里</th>
<th>克莱</th>
</tr>
</table>
</body>
<script>
let all = document.querySelector('#checkall')
let cks = document.querySelectorAll('.ck')
let span = document.querySelector('span')
// 事件监听
all.addEventListener('click', function() {
// 我们需要做的就是把all.checked 给下面三个按钮
// 因为三个按钮在伪数组里面遍历 挨个去除挨个给值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = all.checked
}
// 当我们的全选按钮处于选中状态，则可以改为取消全选
if (all.checked === true) {
span.innerHTML = '取消'
} else {
span.innerHTML = '全选'
}
// 小按钮的做法
// 1.遍历所有非checkbox添加点击事件
//2. 在事件内部，遍历所有的checkbox状态只要有一个false把文字改为全选，并且直接returen（退出循环）
// 3.再循环结束后将全选的状态直接设置为true
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function() {
// 只要点击一个小按钮就要遍历所有的小按钮
for (let j = 0; j < cks.length; j++) {
if (cks[j].checked === false) {
all.checked = false
span.innerHTML = '全选'
return
}
}
// 当循环结束说明没有false都被选中了
all.checked = true
span.innerHTML = '取消'
})
}
})
</script>
</html>
购物车加减案例
<!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>购物车</title>
<!-- 用户点击加号，文本框加1点击减号文本框-1如果文本框为1则禁用减号 -->
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" disabled>
</div>
<script>
// 获取元素
let total = document.querySelector('#tootal')
let add = document.querySelector('#add')
let treduce = document.querySelector('#reduce')
// 点击加号事件监听
add.addEventListener('click', function() {
total.value++
reduce.disabled = false
})
// 点击减号 事件监听
reduce.addEventListener('click', function() {
total.value--
if (total.value <= 1) {
reduce.disabled = true
}
})
</script>
</body>
</html>
二.高阶函数
为函数的高级应用，js中函数可以被当作值来对待
1.函数也是一个数据
2.把函数赋值给变量
回调函数
将函数A作为参数传递给函数B的时候，这个函数就是回调函数
function fun(){
}
setInterval(fn，1000)
此时fn就是回调函数
回头去调用的函数 等着1秒到了回头调用这个函数
三.环境对象this
function fun(){
console.log(this)
}
fun()
环境对象this：
1.谁调用this，this就是谁 2.直接调用函数，其实相当于window.函数所以this指代window
四.编程思想
排他思想
当前状态为A状态，其他元素为B状态
使用：
1.干掉所有人
使用for循环
2.复活自己
通过this或者下标找到自己
小案例：tab栏切换
<!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>切换</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.wrapper {
width: 100%;
height: 50px;
border: 1px solid #333;
margin: 20px;
}
ul {
width: 100%;
height: 100%;
}
li {
display: inline-block;
border: 1px solid #333;
width: 50px;
height: 50px;
line-height: 50px;
}
.wrap {
margin: 20px;
border: 1px solid #333;
}
.active {
border-color: red;
background-color: pink;
}
.wrap>div {
width: 300px;
height: 300px;
display: none;
}
.wrap .actives {
display: block;
}
.wrap>div>img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">篮网</li>
<li class="tab-item">骑士</li>
<li class="tab-item">湖人</li>
<li class="tab-item">快船</li>
</ul>
<div class="wrap">
<div class="mian actives">
<img src="../img/kyrie1.png" alt="">
</div>
<div class="mian">
<img src="../img/kyrie2.jpg" alt="">
</div>
<div class="mian">
<img src="../img/kyrie3.jpg" alt="">
</div>
<div class="mian"><img src="../img/kyrie4.png" alt=""></div>
</div>
</div>
</body>
<script>
// 头部tab栏切换模块
// 得到li
let lis = document.querySelectorAll('.tab-item')
let divs = document.querySelectorAll('.wrap div')
// 先给li添加点击事件
for (let i = 0; i < lis.length; i++)
lis[i].addEventListener('click', function() {
// 找到以前的active类 移除
document.querySelector('.tab .active').classList.remove('active')
this.classList.add('active')
// 底部显示隐藏模块 一定要写在点击事件里面
document.querySelector('.wrap .actives').classList.remove('actives')
divs[i].classList.add('actives')
})
</script>
</html>
