Web前端系列技术之Web APIs基础（从基础开始）②

CSDN话题挑战赛第2期
参赛话题：学习笔记

Web APIs基础学习二

在第一章的内容学习中，认识到了什么是DOM，且学习了DOM的基本操作，但是学习了DOM操作的主要目的是为了针对用户交互网页时进行的 事件处理 ，从而完成一系列的交互效果；或许这个时候就有小伙伴开始疑惑什么是事件了？或者是该如何处理事件了？

所以今天主要介绍学习的内容就是：
一、事件
二、高阶函数
三、环境对象
四、编程思想

---

---

一、事件

从官方概念上理解： JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件，我们可以认为事件是可以被JavaScript侦测到的一种行为；

简单理解：事件是在编程时系统内发生的动作或者发生的事情，用于监测用户做交互效果

在事件的处理问题上，首先要能够给DOM对象添加 事件监听 ，那什么是事件监听？

1. 事件监听

事件监听： 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件 、绑定事件 、或者 事件侦听 ；

基础语法结构：

DOM对象.addEventlistener('事件', 要执行的函数)
1

⭐事件监听三要素：

1. 事件源： 那个DOM元素被事件触发了，要获取DOM元素；
2. 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等；
3. 事件调用的函数： 要做什么事；

样例代码：

<button class="btn">你好，请点击button>
<script>
    let btn=document.querySelector('.btn')
    btn.addEventListener('click', function(){
        alert('你好，我叫小柴')
   })
script>
1
2
3
4
5
6
7

具体效果：

⭐注意：

1. 事件类型要加引号''；
2. 函数是点击之后再去执行，每次点击都会执行一次

2. 事件监听版本

• DOM L0

事件源.on事件 = function() { }//早期写法，存在很多兼容问题
1

• DOM L2

事件源.addEventListener(事件， 事件处理函数)
1

• 发展史：
  DOM L0 ：是 DOM 的发展的第一个版本；
  DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准；
  DOM L2：使用addEventListener注册事件；
  DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型；

3. 事件类型

事件类型主要分为四类：

1. 鼠标事件
2. 焦点事件
3. 键盘事件
4. 文本事件

具体如图所述：

⭐注意：

1. 在文本事件中，通过表单元素获取到的数据都是字符串类型的，这里就需要注意到字符类型的转换；
2. 变量++：存在·一个隐式转换，可以将任何类型转换成数字型的；
3. 小于等于也存在隐式转换，也可以将任何类型的转换成数字型的；

---

二、高阶函数

高阶函数： 是对其他函数进行操作的函数，操作可以是将它们作为参数，或者是返回它们。 简单来说，高阶函数是一个接收函数作为参数或将函数作为输出返回的函数，是一种函数的高级应用，它主要包含两个方面：函数表达式 、回调函数；

1. 函数表达式

函数表达式和普通函数并无本质上的区别：但是在使用方式上，有着明显差异：

代码样例：

//函数表达式
let sum = function (a, b) {
    return a + b
}       
//调用函数
let result = sum(13, 14)
console.log(result)
1
2
3
4
5
6
7

⭐注意：

1. 普通函数的声明与调用无顺序限制，推荐做法先声明再调用；
2. 函数表达式必须要先声明再调用；

2. 回调函数

概念理解： 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数；

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

之前经常会使用的回调函数：

//样例一
function fn(){
     console.log('你好，我是回调函数');
}
//定时器
setInterval(fn,2000)
1
2
3
4
5
6

//样例二
//事件监听
btn.addEventListener('click', function(){
    alert('你好，我叫小柴')
})
1
2
3
4
5

⭐注意：

1. 函数表达式

• 函数也是【数据】
• 把函数赋值给变量

2. 回调函数

• 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
• 回调函数本质还是函数，只不过把它当成参数使用
• 使用匿名函数做为回调函数比较常见

---

三、环境对象

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

主要作用：弄清楚this的指向，可以让代码更简洁，且提高程序的可读性，增加程序的执行效率；

代码样例：

//环境对象的使用
let btn = document.querySelector('.btn')

btn.addEventListener('click', function () {
    this.style.backgroundColor='red'
})
1
2
3
4
5
6

⭐注意：

1. 函数的调用方式不同，this 指代的对象也不同；
2. 【谁调用， this 就是谁】 是判断 this 指向的粗略规则；
3. 直接调用函数，其实相当于是 window.函数，所以 this 指代 window；

---

四、编程思想

这里主要介绍的是：排他思想，所谓的排他思想在今后的编程过程中都会经常使用的，列如网站中的TAB栏选项卡的功能设置，它的使用原理大可理解为两方面：

① 【干掉所有人】：使用for循环；
② 【复活他自己】：通过this或者下标找到自己或者对应的元素；

普通代码样例：

<button>第1个button><button>第2个button><button>第3个button><button>第4个button><button>第5个button>
<script>
    let btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            // 干掉所有人
            for (let j = 0; j < btns.length; j++) {
                btns[j].classList.remove('pink')
            }
            // 复活我自己
            this.classList.add('pink')
        })
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

具体效果：

升级版本思想：

① 循环清除所有兄弟元素的效果类；
② 单独给自己重新添加效果类；

升级代码样例：

<button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
<script>
     let btns = document.querySelectorAll('button')
     for (let i = 0; i < btns.length; i++) {
         btns[i].addEventListener('click', function () {
              // 只需要找出那个唯一的 pink类，删除
              document.querySelector('.pink').classList.remove('pink')
              // 我的
              this.classList.add('pink')
          })
     }
 </script>
1
2
3
4
5
6
7
8
9
10
11
12

---

总结

今天是继续学习Web APIs的第二天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位 点赞+收藏+关注 啦! ! !

---

以上就是所要介绍的Web APIs基础学习的第二节内容，后续即将更新前端开发的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下JavaScript基础学习的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！