事件
- 事件指的是文档或者浏览器窗口中发生的一些特定行为瞬间
- 事件是可以被 JavaScript 侦测到的行为
- 事件可以提高网页的交互性
- 事件通常与函数配合使用,当事件发生时执行对应的函数
- 事件驱动(事件触发时,驱动函数执行)
常见的事件类型
分割线分类记
-
click 鼠标左键点击某个对象(鼠标左键按下并抬起事件(左击事件))
-
dblclick 鼠标双击某个对象()
-
contextmenu 鼠标点击右键(鼠标右键按下抬起事件(右击事件))
-
blur 元素失去焦点,有blur()方法
-
focus 元素获得焦点,有focus()方法
-
input 用户输入时触发
-
change 用户改变域的内容(值改变时触发)
-
keydown 键盘某个键被按下(所有键)
-
keypress 键盘某个键被按下(不包括系统功能键,如箭头键,ctrl,F1,F2等)
-
keyup 键盘某个键被松开
-
mousedown 某个鼠标按键被按下(包含鼠标左中右键)
-
mouseup 某个鼠标按键被松开(包含鼠标左中右键)
-
mousemove 鼠标在某元素上移动(高频触发事件)
-
mouseenter 鼠标进入某元素()
-
mouseleave 鼠标从某元素移开()
-
mouseover 鼠标移到某元素之上(冒泡)
-
mouseout 鼠标从某元素移开(冒泡)
-
submit form提交时触发()
-
reset 表单重置事件()
-
resize 窗口尺寸变化时触发(浏览器可视区窗口尺寸改变事件(高频触发事件))
-
load 某个页面或图像被完成加载(整个页面资源加载完成时触发(html css js img 字体图标。。。))
// 图片加载完成事件
console.log( img.clientWidth,img.clientHeight )// 0 0
img.onload = function (){
console.log( img.clientWidth,img.clientHeight )// 2560 1440
}
事件模型
- 事件模型主要讲的是事件的注册、移除及事件的流向(执行顺序)
- JavaScript中的两种事件模型:DOM0级事件模型 和 DOM2级事件模型
DOM0级事件模型
- DOM0级事件模型是早期的事件模型,所有的浏览器都支持
- 注册事件:在事件类型前面加on,如:
onclick
、onmouseover
… - 移除事件:
dom.onclick = null
- 在DOM0级事件模型中,每个DOM对象只能注册一个相同类型的事件,注册多个则会发生覆盖,只执行最后一个
DOM2级事件模型
-
DOM2级事件模型是较新的事件模型,IE678不支持的
-
注册事件:
addEventListener(type,fn,useCapture)
事件监听器- type----事件类型,例:click、mouseover…
- fn----事件处理函数
- useCapture----布尔值,默认false
- ( true表示事件捕获,false表示事件冒泡 )
-
移除事件:
removeEventListener(type, fnName, useCapture)
-
每个DOM对象可以注册多个相同类型的事件,会依次执行,不会发生覆盖
-
IE678不支持addEventListener,但提供自己的实现方式:
-
注册事件:
attachEvent( type , fnName )
- type----事件类型,例:onclick、onmouseover
- fn----事件处理函数
- 没有第三个参数
-
移除事件:
detachEvent( type , fnName )
选项卡切换
-
选项卡切换效果是页面中最常见、最实用、最广泛的一个效果
-
熟练掌握其写法,充分理解实现原理!!!
-
关键思路:
- 所有选项都有一个点击事件
- 给当前点击的选项添加选中状态,其他选项去掉选中状态(排他法)
- 与当前点击选项索引相同的内容块显示,其他内容块隐藏
// 第一种方法
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 600px;
margin: 100px auto 0;
/* border: 1px solid red; */
}
.header{
overflow: hidden;
border-top: 2px solid #06A86E;
}
.header span{
float: left;
width: 150px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #666;
background-color: #eee;
}
.content{
padding-top: 15px;
height: 200px;
overflow: hidden;
}
.content div{
overflow: hidden;
margin-bottom: 10px;
display: none;
}
.content div img{
width: 130px;
height: 190px;
margin: 0 10px;
float: left;
}
/* 选中样式 */
.header .active{
color: #fff;
background-color: #06A86E;
}
.content .show{
display: block;
}
</style>
<div class="tab">
<div class="header">
<span class="active">喜剧</span>
<span>爱情</span>
<span>科幻</span>
<span>动作</span>
</div>
<div class="content">
<div class="show">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
</div>
<div>
<img src="./imgs/e2.png" alt="">
<img src="./imgs/e2.png" alt="">
<img src="./imgs/e2.png" alt="">
<img src="./imgs/e2.png" alt="">
</div>
<div>
<img src="./imgs/e3.png" alt="">
<img src="./imgs/e3.png" alt="">
<img src="./imgs/e3.png" alt="">
<img src="./imgs/e3.png" alt="">
</div>
<div>
<img src="./imgs/e4.png" alt="">
<img src="./imgs/e4.png" alt="">
<img src="./imgs/e4.png" alt="">
<img src="./imgs/e4.png" alt="">
</div>
</div>
</div>
<script>
// 选项卡切换:最基础、最实用、应用最广泛
// 1.每一个选项都有点击事件
// 2.当前选中项有选中状态,其他选项去掉选中状态
// 3.与当前选中项的索引相同的内容块显示,其他内容块隐藏
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
spans[0].onclick = function (){
spans[0].className = 'active'
spans[1].className = ''
spans[2].className = ''
spans[3].className = ''
divs[0].className = 'show'
divs[1].className = ''
divs[2].className = ''
divs[3].className = ''
}
spans[1].onclick = function (){
spans[0].className = ''
spans[1].className = 'active'
spans[2].className = ''
spans[3].className = ''
divs[0].className = ''
divs[1].className = 'show'
divs[2].className = ''
divs[3].className = ''
}
spans[2].onclick = function (){
spans[0].className = ''
spans[1].className = ''
spans[2].className = 'active'
spans[3].className = ''
divs[0].className = ''
divs[1].className = ''
divs[2].className = 'show'
divs[3].className = ''
}
spans[3].onclick = function (){
spans[0].className = ''
spans[1].className = ''
spans[2].className = ''
spans[3].className = 'active'
divs[0].className = ''
divs[1].className = ''
divs[2].className = ''
divs[3].className = 'show'
}
</script>
// 第二种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
function clearClass(){
spans[0].className = ''
spans[1].className = ''
spans[2].className = ''
spans[3].className = ''
divs[0].className = ''
divs[1].className = ''
divs[2].className = ''
divs[3].className = ''
}
spans[0].onclick = function (){
clearClass()// 清除所有类名
spans[0].className = 'active'
divs[0].className = 'show'
}
spans[1].onclick = function (){
clearClass()// 清除所有类名
spans[1].className = 'active'
divs[1].className = 'show'
}
spans[2].onclick = function (){
clearClass()// 清除所有类名
spans[2].className = 'active'
divs[2].className = 'show'
}
spans[3].onclick = function (){
clearClass()// 清除所有类名
spans[3].className = 'active'
divs[3].className = 'show'
}
</script>
// 第三种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
function clearClass(){
for (var i = 0, len = spans.length; i < len; i++){
spans[i].className = ''
divs[i].className = ''
}
}
for(var i = 0, len = spans.length; i < len; i++){
spans[i].onclick = function (){// 事件处理函数
clearClass()// 清除所有类名
// 遍历找出哪个是当前点击的span
for (var n = 0; n < spans.length; n++){
if (spans[n] === this) {
// n就是当前点击选项的索引
spans[n].className = 'active'
divs[n].className = 'show'
}
}
}
}
</script>
// 第四种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
// 给每一个span添加点击事件
for(var i = 0, len = spans.length; i < len; i++){
spans[i].onclick = function (){// 事件处理函数
// 你点击哪个span,this就指向哪个span
// console.log( this )
// 只能只给哪个选项添加类名,不知道给哪个内容块显示
// this.className = 'active'
// 遍历找出哪个是当前点击的span
for (var n = 0; n < spans.length; n++){
if (spans[n] === this) {
// n就是当前点击选项的索引
spans[n].className = 'active'
divs[n].className = 'show'
} else {
spans[n].className = ''
divs[n].className = ''
}
}
}
}
</script>
// 第五种方法
<body>
<div class="tab">
<div class="header">
<span class="active" index="0">喜剧</span>
<span index="1">爱情</span>
<span index="2">科幻</span>
<span index="3">动作</span>
</div>
<div class="content">
<div class="show">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
</div>
...
</div>
</div>
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
var prevIndex = 0 // 记录上次选中项的索引
// 给每一个span添加点击事件
for(var i = 0, len = spans.length; i < len; i++){
// 给每一个span添加一个属性index,用于保存它的索引
spans[i].index = i
// spans[0].index = 0
// spans[1].index = 1
// spans[2].index = 2
// spans[3].index = 3
spans[i].onclick = function (){// 事件处理函数
// console.log( this )
// 如何知道上次选中项是谁?
// spans[prevIndex]
// 去掉上次选中项的类名
spans[prevIndex].className = ''
divs[prevIndex].className = ''
// 如何知道当前点击的选项的索引?
// console.log( this.index )
// console.log( this.getAttribute('index') )
// 给当前选中项添加类名
spans[this.index].className = 'active'
divs[this.index].className = 'show'
// 更新上次选中项的索引
prevIndex = this.index
}
}
</script>
</body>
// 第六种方法
<body>
<div class="tab">
<div class="header">
<span class="active" onclick="tab(0)">喜剧</span>
<span onclick="tab(1)">爱情</span>
<span onclick="tab(2)">科幻</span>
<span onclick="tab(3)">动作</span>
</div>
<div class="content">
<div class="show">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
<img src="./imgs/e1.png" alt="">
</div>
...
</div>
</div>
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
var prevIndex = 0 // 记录上次选中项的索引
function tab(index){
// index 点击选项的索引
// 去掉上次选中项的类名
spans[prevIndex].className = ''
divs[prevIndex].className = ''
// 给当前选中项添加类名
spans[index].className = 'active'
divs[index].className = 'show'
// 更新上次选中项的索引
prevIndex = index
}
</script>
</body>
// 第七种方法
<body>
<div class="tab">
<div class="header">
<!-- <span>科幻</span> -->
</div>
<div class="content">
<!-- <img src="./imgs/e1.png" alt=""> -->
</div>
</div>
<script>
var data = {
titles: ['喜剧','爱情','科幻','动作'],
contents: [
['./imgs/e1.png','./imgs/e1.png','./imgs/e1.png','./imgs/e1.png'],
['./imgs/e2.png','./imgs/e2.png','./imgs/e2.png','./imgs/e2.png'],
['./imgs/e3.png','./imgs/e3.png','./imgs/e3.png','./imgs/e3.png'],
['./imgs/e4.png','./imgs/e4.png','./imgs/e4.png','./imgs/e4.png']
]
}
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
// 根据数据初始化(默认选中第一项)
data.titles.forEach(function (val, index) {
var newSpan = document.createElement('span');
newSpan.innerHTML = val;
header.appendChild(newSpan);
});
header.firstElementChild.className = 'active';
data.contents[0].forEach(function (val, index) {
var newImg = document.createElement('img');
newImg.src = val;
content.appendChild(newImg);
});
var spans = document.querySelectorAll('.header span');
var prevIndex = 0;
// 给每项添加点击事件
for (var i = 0; i < spans.length; i++) {
spans[i].index = i;
spans[i].onclick = function () {
// this.index 当前点击选项的索引
// 1. 去掉上次选中项的类名
spans[prevIndex].className = '';
// 2. 给当前选项添加类名
this.className = 'active';
// 3. 更新上次选中项的索引
prevIndex = this.index;
content.innerHTML = '' // 清空原来的数据
data.contents[this.index].forEach(function (val, index) {
var newImg = document.createElement('img')
newImg.src = val
content.appendChild(newImg)
})
}
}
</script>
</body>