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 关闭的二维码erweimalet 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 和 buttonlet 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 = truebtn.innerHTML = '已经抽完'}})</script>
</body>
</html>
