* JS的事件
* 什么是事件?
* + 一个事件的组成
* => 触发谁的事件:事件源
* => 触发什么事件: 事件类型
* => 触发后做什么: 事件处理函数
*
* btn.onclick = function () {}
*
* 触发谁的事件 -> btn -> 事件源就是btn
* 触发什么事件 -> onclick -> 事件类型就是click(为什么不加上on ,先欠着，后续在解释)
* 触发后做什么事 -> function () {} -> 这个事件的处理函数
*
* 常见的事件(了解)
* 浏览器事件
* onload:页面全部资源加载完毕
* onscroll: 浏览器页面滚动的时候
* 鼠标事件
* 键盘事件
* 表单事件
* 鼠标事件
<div><div class="sBox"></div></div>
// 0.获取元素
var oDiv = document.querySelector('div')
- 1.左键单击
oDiv.onclick = function () {
console.log('单击元素触发')
}
- 2.左键双击事件 300ms内连续点击两次鼠标
oDiv.ondblclick = function () {
console.log('双击元素时触发')
}
- 3.右键事件
oDiv.oncontextmenu = function () {
console.log('鼠标右键单击时触发')
}
- 4.鼠标按下事件 鼠标按下的时候触发(哪怕鼠标没有抬起也会触发)
oDiv.onmousedown = function () {
console.log('鼠标按下的时候触发')
}
- 5.鼠标抬起事件 鼠标左键抬起的时候触发
oDiv.onmouseup = function () {
console.log('鼠标抬起时触发')
}
- 6.鼠标移入事件 鼠标移入元素的时候触发 注意:移入子级盒子时,也会触发
oDiv.onmouseover = function () {
console.log('onmouseover 移入事件触发')
}
- 7.鼠标移出事件 鼠标移出的时候触发 注意:移入子级盒子，也会触发
oDiv.onmouseout = function () {
console.log('onmouseout 移出事件触发')
}
- 8.鼠标移入事件2 鼠标移入元素的时候触发 注意:移入子级盒子时,不会触发
oDiv.onmouseenter = function () {
console.log('onmouseenter 移入事件触发')
}
- 9.鼠标移出事件2 鼠标移出元素的时候触发 注意:移入子级盒子时,不会触发
oDiv.onmouseleave = function () {
console.log('onmouseleave 移出事件触发')
}
- 10.鼠标移动事件 鼠标在oDiv元素中移动的时候会触发
oDiv.onmousemove = function () {
console.log('鼠标移动事件触发~~~')
}
* 键盘事件
* 1.document 当前文档
* 2.input 输入框
- 1.键盘抬起事件
document.onkeyup = function () {
console.log('任意按下一个按键然后抬起时会触发')
}
- 2.键盘按下事件
document.onkeydown = function () {
console.log('键盘任意一个按键被按下时会触发')
}
- 3.键盘按下抬起事件
document.onkeypress = function () {
console.log('键盘任意按键按下抬起时会触发')
}
* 表单事件
<input type="text">
// 0.获取元素
var inp = document.querySelector('input')
- 1.获得焦点事件
inp.onfocus = function () {
console.log('当前文本框获得焦点')
}
- 2.失去焦点事件
inp.onblur = function () {
console.log('当前文本框失去焦点')
}
- 3.文本框内容改变时触发
inp.onchange = function () {
console.log('当前文本框内容改变')
}
- 4.文本框输入内容时触发
inp.oninput = function () {
console.log('当前文本框正在输入内容')
}
* 选项卡案例
<!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>
* {
padding: 0;
margin: 0;
}
ul,ol {
list-style: none;
}
.header {
width: 600px;
height: 50px;
line-height: 50px;
background-color: aqua;
display: flex;
}
.header li {
width: 200px;
}
.content {
width: 600px;
height: 400px;
line-height: 400px;
text-align: center;
font-size: 100px;
}
.content li {
display: none;
}
.header .active {
background-color: orange;
}
.content .active {
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<ul class="header">
<li class="active">header_1</li>
<li>header_2</li>
<li>header_3</li>
</ul>
<ol class="content">
<li class="active">content_1</li>
<li>content_2</li>
<li>content_3</li>
</ol>
<script>
/**
* 需求：
* header:
* 点击其中任意一个li的时候，给点击的li添加一个类名(active)
* 然后给其他的li取消类名
* content:
* 根据选中了header下的那个li，然后对应的展示自身的哪一个li
*
* 给点击的li添加一个类名(active)，然后给其他的li取消类名
* 解决：1.给所有的li全都取消类名 2.给当前点击的li 添加一个类名
* 根据选中了header下的那个li，然后对应的展示自身的哪一个li
* 解决：1，给所有的li 全都取消类名;
* 2、根据点击了header内的那个li，给对应顺序的li添加一个类名
* */
/**
* 补充：将伪数组转换为真实数组的方法
* 伪数组：document.querySelectorAll('.header li')
* 转换为真数组:[...伪数组]
*
* 原理：欠着,ES6的时候会详细讲
* */
// 0.获取元素
var headerLi = [...document.querySelectorAll('.header li')] //获取header下的所有li以数组的方式展示
var contentLi = [...document.querySelectorAll('.content li')] //获取content下的所有li以数组的方式展示
// headerLi[0].onclick = function () {
// // 给当前元素添加类名，给其他元素取消类名
// }
// headerLi[1].onclick = function () {
// // 给当前元素添加类名，给其他元素取消类名
// }
// headerLi[2].onclick = function () {
// // 给当前元素添加类名，给其他元素取消类名
// }
// 用遍历的方式完成上边的功能
// 1.实现header的功能
// headerLi.forEach(function(item) { //遍历header下的所有li
// item.onclick = function () { //给header内部的每一个li添加一个点击事件
// // console.log('点击了header内的li')
// // 1.给所有的li取消类名
// // headerLi[0].classList.remove('active')
// // headerLi[1].classList.remove('active')
// // headerLi[2].classList.remove('active')
// headerLi.forEach(function (li) { //遍历header下的所有li
// li.classList.remove('active') //给所有的li取消类名
// })
// // 2.给当前点击的Li添加一个类名
// item.classList.add('active')
// }
// })
headerLi.forEach(function(item, index) { //遍历header下的所有li index是li对应的下标
item.onclick = function () { //给header内部的每一个li添加一个点击事件
// console.log('点击了header内的li')
// 1.给所有的li取消类名
headerLi.forEach(function (li, liIndex) { //遍历header下的所有li
li.classList.remove('active') //给所有的li取消类名
/**
* 因为header和content的li 数量一定是相同的
* 所以我们可以省略一个forEach，利用一个循环，完成两个li 的取消类名
* contentLi[0].classList.remove('active')
contentLi[1].classList.remove('active')
contentLi[2].classList.remove('active')
* contentLi.forEach(function(li) {
li.classList.remove('active')
})
* */
contentLi[liIndex].classList.remove('active') //利用下标将content内部的li去掉类名
})
// 2.给当前点击的Li添加一个类名
item.classList.add('active')
// 根据点击的header里面的li给content里面的li添加类名
contentLi[index].classList.add('active')
}
})
headerLi.forEach(function(item, index) { //遍历header下的所有li index是li对应的下标
item.onclick = function () { //给header内部的每一个li添加一个点击事件
// 1.给所有的li取消类名
headerLi.forEach(function (li, liIndex) { //遍历header下的所有li
li.classList.remove('active') //给所有的li取消类名
contentLi[liIndex].classList.remove('active') //利用下标将content内部的li去掉类名
})
// 2.给当前点击的Li添加一个类名
item.classList.add('active')
// 根据点击的header里面的li给content里面的li添加类名
contentLi[index].classList.add('active')
}
})
