目录
DOM-事件基础
事件
-
事件监听
让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件
语法:
对象名.addEventListener('事件',要执行的函数)
-
事件监听版本
事件源.on事件 = function(){} 事件源.addEventListener(事件,事件处理函数)
-
事件类型
高阶函数
-
函数表达式
let 函数名 = function(){} //类似于let num = 10,把函数当值来看
-
回调函数
如果将函数A作为参数传递给函数B时,我们称函数A为回调函数
function fn(){ console.log('我是回调函数') } //fn传递给了setInterval,fn就是回调函数 setInterval(fn,1000)
环境对象
环境对象指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
let btn = document.querySelector('button')
btn.addEventListener('cilck',function(){
console.log(this)
})
//输出的是对象btn,因为btn调用了这个函数,所以this指向btn
编程思想
排他思想
干掉所有人(for循环移除所有人的类)
复活我自己(this指向我自己时添加上这个类)
<!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>
.pink {
background: pink;
}
</style>
</head>
<body>
<button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
<script>
let btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function () {
for (let j = 0; j < btn.length; j++) {
btn[j].classList.remove('pink')
}
//用这个for循环遍历所有的对象,移除pink类
this.classList.add('pink')
//this即点击的那一个加上pink类
})
}
</script>
</body>
</html>
排他思想升级版(优化简洁版)
<!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>
.pink {
background: pink;
}
</style>
</head>
<body>
<button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
<script>
let btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('cilck', function () {
document.querySelector('.pink').classList.remove('pink')
//查询到带pink类的那个,再将它的pink类移除
this.classList.add('pink')
//this即点击的那一个加上pink类
})
}
</script>
</body>
</html>