一。事件
1.事件:
组成:
(1)触发谁的事件:事件源
(2)触发的什么事件:事件类型
(3)触发以后做什么:事件处理函数
当我们想让元素做什么,就主要写在事件处理函数中
2.事件的绑定
方式1: 以上这种方式进行事件绑定时,后面的会覆盖掉前面的,故最终单击元素时只会打印出div2
box1.onclick=function(){
console.log("div1")
}
box1.onclick=function(){
console.log("div2")
}
方式2:addEventListener()事件监听函数:可以绑定多事件函数,依次执行
此种方式可以给事件绑定多个事件处理函数,且不会被覆盖,依次执行
box2.addEventListener("click",function(){
console.log("box2_1")
})
box2.addEventListener("click",function(){
console.log("box2_2")
})
兼容性问题解决:主要是解决低版本ie浏览器的兼容性问题,但此方法ie11已经不支持了,此种绑定函数还需要在事件前面加上on,但使用addEventListener时已经不需要这样做了
box2.attachEvent("onclick",function(){
console.log("兼容性")
})
二.选项卡制作
1.css样式部分
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
display: flex;
}
li{
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
margin-left: 5px;
}
.active{
background-color: brown;
}
main{
color: white;
}
main div{
width: 380px;
height: 100px;
display: none;
}
main div:first-child{
background-color: green;
}
main div:nth-child(2){
background-color: yellowgreen;
}
main div:nth-child(3){
background-color: beige;
}
.active_div{
display: block;
}
</style>
2.html部分
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
</ul>
<main>
<div class="active_div">heme</div>
<div index="1">About</div>
<div>Login</div>
</main>
</nav>
3.javascript部分
<script>
var list = document.querySelectorAll("nav ul li")
var divs = document.querySelectorAll("main div")
//循环给每一个li标签绑定单击事件
for(var i=0;i<list.length;i++){
list[i].dataset.index=i //给每一个li添加一个自定义属性data—index
list[i].onclick=function(){
//编写该事件要处理的功能
//先将所有li上面的active删掉
for(var m=0;m<list.length;m++){
list[m].classList.remove("active")
divs[m].classList.remove("active_div")
}
//将active添加到当前点击的li上
this.classList.add("active")
//获取当前点击的元素上的自定义属性data-index的值
var index=this.dataset.index
console.log(index);
divs[index].classList.add("active_div")
}
}
</script>