Web APIs——DOM-事件基础

目录

一、 事件

1.什么是事件？

2.什么是事件监听？

3.事件监听三要素：

事件监听

4.事件类型

鼠标事件

焦点事件

键盘事件

文本事件

二、高阶函数

1.函数表达式

2.回调函数

三、环境对象

四、编程思想

1.排他思想

---

一、 事件

1.什么是事件？

事件是在编程时系统内发生的 动作 或者发生的事情 ，比如用户在网页上 单击 一个按钮

2.什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法：

元素.addEventListener('事件',要执行的函数)

3.事件监听三要素：

事件源： 那个dom元素被事件触发了，要获取dom元素

事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数： 要做什么事

事件监听

//1.获取元素
 let btn = document.querySelector('button')
//2.事件监听
btn.addEventListener('click',function(){
     alert('被点击了')
})

注意：

1. 事件类型要 加引号

2. 函数是点击之后再去执行，每次

点击都会执行一次

4.事件类型

鼠标事件

鼠标触发

click        鼠标点击

mouseenter        鼠标经过

mouseleave        鼠标离开

焦点事件

表单获得光标

focus        获得焦点

blur        失去焦点

键盘事件

键盘触发

Keydown        键盘按下触发

Keyup        键盘抬起触发

文本事件

表单输入触发

input        用户输入事件

二、高阶函数

高阶函数 可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高

级应用。

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

1.函数表达式

函数表达式和普通函数并无本质上的区别：

//函数表达式与普通函数本质上是一样的
let counter = function(x,y){
    return x + y
}
//调用函数
let result = counter(5,10)
console.log(result)

普通函数的声明与调用无顺序限制，推荐做法先声明再调用

函数表达式必须要先声明再调用

高阶函数 可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

2.回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为 回调函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是 回调函数

常见的使用场景：

//回调函数1
function fn(){
     console.log('我是回调函数...')
}
//fn传递给了setInterval,fn就是回调函数
setInterval(fn,1000)
//回调函数2
box.addEventListener('click',function(){
      console.log('我也是回调函数')
})

三、环境对象

环境对象指的是函数内部特殊的 变量 this ，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】 是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

四、编程思想

1.排他思想

当前元素为A状态,其他元素为B状态

使用：

1. 干掉所有人

使用for循环

2. 复活他自己

通过this或者下标找到自己或者对应的元素