事件
事件监听
-
什么是事件？
指在编程时系统内发生的动作或者事情。比如用户在网页上单击一个按钮，在键盘按下一个按钮
-
什么是事件监听？
就是让程序检测是否有事件产生，一旦事件触发，就立即做出响应，也称为 注册事件
-
语法及使用
<style>
p{
display: block;
width: 300px;
height: 300px;
background-color: pink;
margin: 100 auto;
}
</style>
</head>
<body>
<button class="b1">点击抽奖</button>
<button class="b2">点击抽奖</button>
<p></p>
<script>
// 语法：元素.addEventListener('事件', 要执行的函数)
// 获取表单元素
let b1 = document.querySelector('.b1')
// 添加监听事件 鼠标点击效果 click
b1.addEventListener('click',function () {
// 鼠标点击后的会出发什么
alert('恭喜中奖')
})
let b2 = document.querySelector('.b2')
b2.addEventListener('click',function () {
alert('谢谢参与')
})
// mouseover 表示鼠标移入
let pDom = document.querySelector('p')
pDom.addEventListener('mouseover',function () {
alert('今天天气真好')
})
</script>
- 批量给标签绑定事件
<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元素被事件触发了（获取dom元素）
事件： 用什么方式触发（是鼠标单击 click、还是鼠标经过 mouseover 等）
事件调用的函数（处理程序）： 要做什么事（弹窗还是修改样式等）
拓展阅读-事件监听版本
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级事件的基础上重新定义了这些事件，也添加了一些新事件类型
事件类型
-
鼠标事件（鼠标触发）
click 鼠标点击
mouseenter/mouseover 鼠标经过
mouseleave/mouseout 鼠标离开
-
焦点事件（表单获得光标）
focus 获得焦点
blur 失去焦点
-
键盘事件（键盘触发）
Keydown 键盘按下触发
Keyup 键盘抬起触发
-
文本事件（表单输入触发）
input 用户输入事件
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<!-- 只有表单 元素 有获得焦点 失去焦点事件 -->
<input type="text" />
<script>
// 获取div元素
let div = document.querySelector('div');
let input = document.querySelector('input');
// 绑定不同的事件
// div.addEventListener("click",function () {
// console.log("click 鼠标点击事件");
// })
// 鼠标经过元素
// div.addEventListener("mouseenter",function () {
// console.log("mouseenter 鼠标经过");
// })
// 鼠标离开元素
// div.addEventListener("mouseleave",function () {
// console.log("mouseleave 鼠标离开");
// })
// 鼠标经过
// div.addEventListener("mouseover",function () {
// console.log("mouseover 鼠标经过");
// })
// 鼠标离开
// div.addEventListener("mouseout",function () {
// console.log("mouseout 离开");
// })
// 获得焦点
// input.addEventListener("focus",function () {
// console.log("输入框 获得焦点 ");
// document.body.style.backgroundColor='#000'
// })
// // 失去焦点
// input.addEventListener("blur",function () {
// console.log("输入框 失去焦点");
// document.body.style.backgroundColor='#fff'
// })
// 键盘按下事件 div不行 表单可以
// 给body标签添加比较多
// document.body.addEventListener("keydown",function () {
// console.log("keydown 按下");
// })
// 键盘抬起
// document.body.addEventListener("keyup",function () {
// console.log("keyup 抬起");
// })
// 输入事件 输入框
// input.addEventListener("input",function () {
// console.log("只要你在我的输入框输入了内容，我就触发");
// })
</script>
</body>
环境对象
介绍
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
使用
函数的调用方式不同，this 指代的对象也不同，谁调用， this 就是谁
<body>
<div>
<img src="./imgs/01.png" alt="" class="close">
<img src="./imgs/02.png" alt="" class="erweima">
</div>
<script>
// 获取dom元素
let close = document.querySelector('.close')
let erweima = document.querySelector('.erweima')
// 绑定点击事件
close.addEventListener('click',function () {
this.parentNode.style.display='none'
})
</script>
</body>
编程思想
排他思想
使用：
干掉所有人（使用for循环）
复活他自己（通过this或者下标找到自己或者对应的元素）
<body>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
<li>我是6</li>
</ul>
<script>
/*
排他思想的应用
1、获取dom元素数组
2、遍历数组
3、绑定数组的每个元素的事件
4、再循环一遍把原有样式去除
5、再设置自己需要的样式
*/
let liList = document.querySelectorAll('li')
for (let i = 0; i < liList.length; i++) {
liList[i].addEventListener('click',function () {
for (let j = 0; j < liList.length; j++) {
liList[j].style.color='black'
}
this.style.color='#fff'
})
}
</script>
</body>
字符串的长度
字符串数组的特点
-
拥有数组的长度 length
-
可以使用下标索引，获取到对应的值，例如：let str="你们好呀"; str[0]=你 str[1]=们
-
可以跟数组一样遍历
-
不能使用.push等方法来添加及修改数组
综合案例
商品单选-控制全选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>01-全选商品</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" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 获取dom元素
let checkAll = document.querySelector("#checkAll")
let ckList = document.querySelectorAll('.ck')
// 遍历数组
checkAll.addEventListener('click',function () {
// 获取数组的值
for (let index = 0; index < ckList.length; index++) {
// kList[index]的选中状态 = checkAll 的选中状态
ckList[index].checked = checkAll.checked
}
})
// 遍历数组
for (let index = 0; index < ckList.length; index++) {
// 批量绑定 ckList 数组里的每一个值的点击事件
ckList[index].addEventListener('click',function () {
let checked = allChecked()
// checkAll的选中状态 =checkAll 的选中状态
checkAll.checked = checked
})
}
// 函数封装
function allChecked() {
// 定义一个空数量的变量，用来装商品总数
let num = 0
// 遍历ckList数组
for (let index = 0; index < ckList.length; index++) {
// 判断每一个单选框的选中状态
// 如果单选框被选中，那么num做++
if (ckList[index].checked) {
num++
}
}
// 判断数量与数组长度间的关系
if (num === ckList.length) {
return true
}else {
return false
}
}
</script>
</body>
</html>
购物车加减操作
<body>
<h1>1</h1>
<button class="up">+</button>
<button class="down" disabled>-</button>
<script>
let hDom = document.querySelector('h1')
let up = document.querySelector('.up')
let down = document.querySelector('.down')
// 绑定 +号按钮 点击事件
up.addEventListener('click',function () {
// 每点一次 +号按钮 h1文本内容数字加1
hDom.innerText++
// 点击恢复 -号按钮 的使用
down.disabled = false
})
// 绑定 -号按钮 点击事件
down.addEventListener('click',function () {
hDom.innerText--
// hDom.innerText是字符串类型 所以在做判断的时候不能使用 ===
if (hDom.innerText == 1) {
down.disabled = true
}
})
</script>
</body>
Tab栏切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
<script>
let tabItem = document.querySelectorAll('.tab-item')
let main = document.querySelectorAll('.main')
// 遍历第一遍，获取tabItem数组的每一个li
for (let i = 0; i < tabItem.length; i++) {
// 给tabItem数组的每一个li绑定点击事件
tabItem[i].addEventListener('click',function () {
// 遍历第二遍，去除li身上原有的样式
for (let j = 0; j < tabItem.length; j++) {
tabItem[j].style.borderColor='#fff'
}
// 单独添加自身样式
this.style.borderColor='red'
// 遍历第三遍，获取main数组的所有div，并去除原有样式
for (let index = 0; index < main.length; index++) {
main[index].classList.remove('active')
}
//main[i] i 就是被点击li标签的下标
main[i].classList.add('active')
})
}
</script>
</body>
</html>
