DOM-事件基础
一.事件
1.事件
目标：能够给 DOM元素添加事件监听
事件:事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
事件监听:就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
语法:
事件监听三要素:
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事
举例说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<body>
<button>点击我</button>
<script>
//1.获取按钮元素
let btn = document.querySelector('button')
//2.事件监听 绑定事件 注册事件 事件侦听
// 事件源.addEventListener('事件',事件处理函数)
btn.addEventListener('click',function(){
alert('月薪过万')
})
</script>
</body>
</html>案例：淘宝点击关闭二维码
需求：点击关闭之后，淘宝二维码关闭 案例 分析： ①：点击的是关闭按钮 ②：关闭的是父盒子 核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素
<!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;
}
.erweima {
position: relative;
width: 160px;
height: 160px;
margin: 100px auto;
border: 1px solid #ccc;
}
.erweima i {
position: absolute;
left: -13px;
top: 0;
width: 10px;
height: 10px;
border: 1px solid #ccc;
font-size: 12px;
line-height: 10px;
color: #ccc;
font-style: normal;
cursor: pointer;
}
</style>
</head>
<body>
<div class="erweima">
<img src="./images/code.png" alt="">
<i class="close_btn">x</i>
</div>
<script>
//1.获取元素 事件源i 关闭的二维码erweima
let close_btn = document.querySelector('.close_btn')
let erweima = document.querySelector('.erweima')
//2.事件监听
close_btn .addEventListener('click',function(){
//erweima 关闭 他是隐蔽的
erweima.style.display = 'none'
})
</script>
</body>
</html>案例：随机点名
需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮 案例 分析： ①：点击的是按钮 ②：随机抽取一个名字 ③： 当名字抽取完毕，则利用 disabled 设置为 true
<!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>
div{
width: 200px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>开始抽奖吧</div>
<button>点击点名</button>
<script>
//1.获取元素 div 和 button
let box = document.querySelector('div')
let btn = document.querySelector('button')
//2.随机函数
function getRandom(min,max){
return Math.floor(Math.random()*(max - min + 1)) + min
}
//声明一个数组
let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操','pink老师']
//3.事件监听
btn.addEventListener('click',function(){
//随机的数字
let random = getRandom(0,arr.length - 1)
console.log(arr[random])
box.innerHTML = arr[random]
//删除数组里面的元素 splice(从那里删，删几个)
arr.splice(random,1)
//如果数组里面剩下最后一个，就要禁用按钮
if (arr.length === 1){
// console.log('最后一个')
btn.disabled = true
btn.innerHTML = '已经抽完'
}
})
</script>
</body>
</html>
