webApi第二天
事件
事件
事件是在编程时系统内发生的动作或者发生的事情
事件监听
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
事件监听三要素
1.事件源
那个dom元素被事件触发了，要获取dom元素
2.事件
用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
3.事件调用的函数
要做什么事（元素变化）
<body>
<button class="btn1">开始</button>
<button class="btn2">结束</button>
<div></div>
<script>
/*
触发事件dom元素
事件类型
事件触发了 做业务 函数
*/
//获取dom元素
let btn1Dow = document.querySelector('.btn1');
let btn2Dow = document.querySelector('.btn2');
let divDow = document.querySelector('div')
// console.log(btn1Dow);
//元素.addEventListener（'事件'，要执行的函数）
//click 鼠标点击的时候
btn1Dow.addEventListener('click',function () {
console.log('开始了');
})
btn2Dow.addEventListener('click',function () {
console.log('结束了');
})
divDow.addEventListener('mouseover',function () {
console.log('进来');
})
</script>
</body>
案例
点击减小案例
<body>
<button>1000</button>
<script>
//获取dom元素
let btnDow = document.querySelector('button');
// let num = 1000;
//点击按钮执行函数
btnDow.addEventListener('click',function () {
// btnDow.innerHTML=num--;
--btnDow.innerHTML;
})
</script>
</body>
关闭弹窗案例
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 160px;
height: 200px;
background-color: aquamarine;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div></div>
<script>
//获取dom元素
let divDom = document.querySelector('div')
//点击div执行函数
divDom.addEventListener('click',function(){
divDom.style.display='none'
})
</script>
</body>
随机点名
<body>
<h1></h1>
<button class="btn1">开始</button>
<button class="btn2">停止</button>
<script>
let h1Dow = document.querySelector('h1');
let btn1Dow = document.querySelector('.btn1');
let btn2Dow = document.querySelector('.btn2');
let names = ['赵云','黄忠','程咬金','悟空','猪刚鬣','阿珂']
h1Dow.innerHTML = names
let timeId;
function getNum() {
let i = Math.round(Math.random()*(names.length-1));
h1Dow.innerText = names[i]
}
btn1Dow.addEventListener('click',function () {
// 每次点击先清空一次定时器
clearInterval(timeId)
//点击后取消开始按钮功能
// btn1Dow.disabled = true;
timeId = setInterval(getNum,100)
})
btn2Dow.addEventListener('click',function () {
//停止后开放开始按钮功能
// btn1Dow.disabled = false;
clearInterval(timeId)
})
</script>
</body>
商品全选
点击全选复选框，选中所有单个复选框。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>全选商品</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 ck1" />
</td>
<td>小米手机</td> <td>小米</td> <td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck ck2" />
</td>
<td>小米净水器</td> <td>小米</td> <td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck ck3" />
</td>
<td>小米电视</td> <td>小米</td> <td>￥5999</td>
</tr>
</table>
<script>
//1.获取全选标签
let checkAllDow = document.querySelector('#checkAll')
//2.获取一个数组（多个类名为ck的复选框数组）
let ckListDow = document.querySelectorAll('.ck')
//3.绑定全选复选框的点击事件
checkAllDow.addEventListener('click',function () {
//4.循环数组里的么一个复选框 选中状态=全选标签的选中状态
for (let i = 0; i < ckListDow.length; i++) {
// ckListDow[i].checked 每一个复选框
ckListDow[i].checked = checkAllDow.checked;
}
})
</script>
</body>
</html>
单选控制全选
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>单选商品-影响全选</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 ck1" />
</td>
<td>小米手机</td> <td>小米</td> <td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck ck2" />
</td>
<td>小米净水器</td> <td>小米</td> <td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck ck3" />
</td>
<td>小米电视</td> <td>小米</td> <td>￥5999</td>
</tr>
</table>
<script>
//1.获取全选标签
let checkAllDow = document.querySelector('#checkAll')
//2.获取一个数组（多个类名为ck的复选框数组）
let ckListDow = document.querySelectorAll('.ck')
function isAllChecked() {
//1.定义一个变量是单选选中的数量
let checkedNum = 0;
//2.遍历数组 每有一个选中的 选中数量加1
for (let index = 0; index < ckListDow.length; index++) {
if (ckListDow[index].checked){
checkedNum++
}
}
//3.判断选中的数量 和商品总数之间的关系
if (checkedNum === ckListDow.length){
// console.log('全选');
return true;
}else {
// console.log('不全选');
return false;
}
}
//二 遍历单选框数组，并给每个单选框注册点击事件
for (let index = 0; index < ckListDow.length; index++) {
ckListDow[index].addEventListener('click',function () {
// let checked = isAllChecked();
//全选按钮选中状态 等于 上面函数返回值 true为选中 false则不选中
checkAllDow.checked=isAllChecked();
})
}
</script>
</body>
</html>
批量给标签绑定事件
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 点击每一个li标签 都可以输出 你好
// 获取li标签数组
let liList=document.querySelectorAll("li");
// 循环
for (let index = 0; index < liList.length; index++) {
// 给每一个li标签绑定点击事件
liList[index].addEventListener("click",function () {
console.log("你好");
})
}
</script>
</body>
事件监听版本
DOM L0
事件源.on事件 = function() { }
DOM L2
事件源.addEventListener(事件， 事件处理函数)
发展史：
DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
使用旧方式 L0 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
on也可以是在 行内 绝对不推荐
addEventListener 对一个事件类型 绑定多个处理函数
on+事件 对一个事件类型 只能绑定一个处理函数
** on事件 = function() { } **
<body>
<div></div>
<script>
//获取div
let div = document.querySelector('div')
//使用旧方式 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
//click 鼠标点击
div.onclick = function(){
console.log('鼠标点击出现')
}
//缺点： 使用on+事件 对事件类型 只能绑定一个处理函数。 重复设置了也无效，
//使用 addEventListener 对一个事件类型，可以绑定多个处理函数
div.onclick = function(){
console.log('鼠标点击出现')
} //无效
div.onclick = function(){
console.log('鼠标点击出现')
} //无效
</script>
</body>
不同事件类型
鼠标事件
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
<body>
<div></div>
<script>
let div = document.querySelector('div')
// 鼠标事件 鼠标触发
//click 鼠标点击
div.addEventListener("click",function(){
console.log('鼠标点击')
})
//mouseenter 鼠标经过
div.addEventListener("mouseenter",function(){
console.log('鼠标经过')
})
//mouseleave 鼠标离开
div.addEventListener("mouseleave",function(){
console.log('鼠标离开')
})
</script>
</body>
焦点事件
//表单元素获得焦点 失去焦点
focus 获得焦点
blur 失去焦点
<body>
<!-- 只有表单元素有获得焦点 失去焦点事件 -->
<input type="text">
<script>
let input = document.querySelector('input')
//焦点事件
// focus 获得焦点
input.addEventListener("focus",function(){
console.log('输入框 获得焦点')
//输入框获得焦点时，body页面背景色变蓝
document.body.style.backgroundColor='skyblue'
})
// blur 失去焦点
input.addEventListener("blur",function(){
console.log('输入框 失去焦点')
//失去焦点时，页面背景色变白
document.body.style.backgroundColor='#fff'
})
</script>
</body>
键盘事件
注：div不行，表单可以，给body标签加的比较多
keydown 按下
keyup 抬起
<body>
<script>
// 键盘事件 键盘触发 div不行 表单可以
// 给body标签添加比较多
// keydown 键盘按下触发
document.body.addEventListener("keydown",function(){
console.log('keydown 按下')
})
// keyup 键盘抬起触发
document.body.addEventListener("keyup",function(){
console.log('keyup 抬起')
})
</script>
</body>
文本事件
input 用户输入事件
<body>
<input type="text">
<script>
// 文本事件 表单输入触发
// input 用户输入事件
input.addEventListener("input",function(){
console.log('只要在该输入框输入了内容，我就会触发')
})
</script>
</body>
