1. 事件
目标:能够给DOM元素添加事件监听
-
什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
-
什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件
语法:
事件源.addEventListener('事件',要执行的函数);
事件监听三要素:
- 事件源:那个dom元素被事件触发了,要获取dom元素
- 事件:用什么方式触发,比如鼠标单击click、鼠标经过mouseover 等
- 事件调用的函数:要做什么事
目标:能够给DOM元素添加事件监听
-
事件监听
举例说明:
// 1.获取元素
let btn = document.querySelector('button');
// 2.事件监听(注册事件)
btn.addEventListener('click',() => {
alert('被点击了')
})
注意:
-
事件类型要加引号
-
函数是点击之后再去执行,每次 点击都会执行一次
2.事件监听版本
-
DOM LO 事件源.on事件= function() { }.
-
DOM L2 事件源.addEventListener(事件,事件处理函数)
-
发展史:
DOM LO:是DOM的发展的第一个版本; L: level
DOM L1 :DOM级别1于1998年10月1日成为W3C推荐标准
DOM L2:使用addEventListener注册事件
DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型
3.事件类型
1.高阶函数
目标:掌握高阶函数用法,实现函数更多使用形式
高阶函数可以被简单理解为函数的高级应用,JavaScript中函数可
以被当成【值】来对待,基于这个特性实现函数的高级应用。
【值】就是JavaScript中的数据,如数值、字符串、布尔、对象等。 学习路径: 1.函数表达式 2.回调函数
1.1函数表达式
函数表达式和普通函数并无本质上的区别:
// 函数表达式与普通函数本质上是一样的
let counter = function(x, y) {
return x + y;
}
// 调用函数
let result = counter(3, 5);
console.log(result);
1.2 回调函数
目标:能够说出什么是回调函数
如果将函数A做为参数传递给函数B时,我们称函数A为回调函数
简单理解:当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
常见的使用场景:
function fn() {
console.log('我是回调函数');
}
// fn传递给了setInterval,fn就是回调函数
setInterval(fn, 1000);
box.addEventListener('click', () => {
console.log('我也是回调函数');
})
3.环境对象
目标:能够分析判断出函数在不同环境中this所代指的对象
环境对象指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
作用:弄清楚this的指向,可以让我们代码更简洁
-
函数的调用方式不同,this指代的对象也不同
-
【谁调用, this就是谁】是判断this指向的粗略规则
-
直接调用函数,其实相当于是window.函数,所以this指代window
4.编程思想
排他思想
当前元素为A状态,其他元素为B状态
使用:
1.干掉所有人
使用for循环
2.复活他自己
通过this或者下标找到字即或者对应的元素
第一种方式:
// 1.获取元素
let btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
// 2.事件监听
btn[i].addEventListener('click', () => {
for (let j = 0; j < btn.length; j++) {
//干掉所有人
btn[j].classList.remove('pink');
}
//留下我自己
btn[i].classList.add('pink');
})
}
第二种方式:
// 1.获取元素
let btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
// 2.事件监听
btn[i].addEventListener('click', () => {
//找出唯一一个有pink类的
document.querySelector('.pink').classList.remove('pink');
//给自己再添加上pink类
btn[i].classList.add('pink');
})
}