事件监听
语法
语法：dom元素.addEventListener(事件类型，处理函数)
let btn = document.querySelector('button')
事件监听三要素
- 事件源 (谁被触发了)
- 事件 (用什么方式触发，点击还是鼠标经过等)
- 事件处理程序 （要做什么事情）
事件类型
应用
随机点名
<!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 {
margin: 100px auto;
margin-left: 200px;
}
p {
width: 300px;
height: 50px;
border: 1px solid #0af;
text-align: center;
line-height: 50px;
}
button {
width: 150px;
}
</style>
</head>
<body>
<div>
<p>点名了</p>
<button class="start">点名</button>
<button class="end">结束</button>
<p class="text"></p>
</div>
<script>
// 创建数据组
let names = ['浩良', '铭锋', '文斌', '坤哥', '刀郎', '和峰', '嘉辉']
// 获得对象元素
let newNames = []
let p = document.querySelector('p')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let text = document.querySelector('.text')
// 创建定时器让名字循环显示
// 定义变量 让变量可以在函数外使用
let index, timeId, newname, aa = ''
// 创建开始点击事件
start.addEventListener('click', function () {
clearInterval(timeId)
timeId = setInterval(function () {
// 创建随机索引值取得数组内容
index = parseInt(Math.random() * names.length)
// 修改网页元素内容
p.innerText = names[index]
}, 100);
})
// 创建结束点击事件
end.addEventListener('click', function () {
// 结束计时器
if (index == undefined) {
returns
}
clearInterval(timeId)
aa += names[index]
// 在数组中删除选择中的数据
names.splice(index, 1)
console.log(names);
index = undefined
if (names.length == 0) {
// 当数组删空时禁用按钮
start.disabled = true
end.disabled = true
}
console.log(aa);
text.innerHTML = aa
// console.log(names[index]);
})
</script>
</body>
</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 {
margin: 100px auto;
margin-left: 200px;
}
p {
width: 300px;
height: 50px;
border: 1px solid #0af;
text-align: center;
line-height: 50px;
}
button {
width: 150px;
}
</style>
</head>
<body>
<div>
<p>点名了</p>
<button class="start">点名</button>
<button class="end">结束</button>
<p class="text"></p>
</div>
<script>
// 创建数据组
let names = ['浩良', '铭锋', '文斌', '坤哥', '刀郎', '和峰', '嘉辉']
// 获得对象元素
let newNames = []
let p = document.querySelector('p')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let text = document.querySelector('.text')
// 创建定时器让名字循环显示
// 定义变量 让变量可以在函数外使用
let index, timeId, newname, aa = ''
// 创建开始点击事件
start.addEventListener('click', function () {
clearInterval(timeId)
timeId = setInterval(function () {
// 创建随机索引值取得数组内容
index = parseInt(Math.random() * names.length)
// 修改网页元素内容
p.innerText = names[index]
}, 100);
})
// 创建结束点击事件
end.addEventListener('click', function () {
// 结束计时器
if (index == undefined) {
returns
}
clearInterval(timeId)
aa += names[index]
// 在数组中删除选择中的数据
names.splice(index, 1)
console.log(names);
index = undefined
if (names.length == 0) {
// 当数组删空时禁用按钮
start.disabled = true
end.disabled = true
}
console.log(aa);
text.innerHTML = aa
// console.log(names[index]);
})
</script>
</body>
</html>
