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

努力学前端的小柴

已于 2022-09-16 17:15:43 修改

阅读量410

点赞数 10

分类专栏： Web APIs基础学习文章标签：前端 javascript 前端框架开发语言 web

于 2022-09-16 14:19:33 首次发布

本文链接：https://blog.csdn.net/IAMLSD550/article/details/126889664

版权

Web APIs基础学习专栏收录该内容

13 篇文章 2 订阅

订阅专栏

Web APIs基础学习二

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

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

一、事件

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

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

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

1. 事件监听

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

基础语法结构：

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

⭐事件监听三要素：

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

样例代码：

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

具体效果：

在这里插入图片描述

⭐注意：

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

2. 事件监听版本

DOM L0

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

DOM L2

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

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

3. 事件类型

事件类型主要分为四类：

鼠标事件
焦点事件
键盘事件
文本事件

具体如图所述：

在这里插入图片描述

⭐注意：

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

二、高阶函数

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

1. 函数表达式

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

代码样例：

//函数表达式
let sum = function (a, b) {
    return a + b
}       
//调用函数
let result = sum(13, 14)
console.log(result)

⭐注意：

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

2. 回调函数

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

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

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

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

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

⭐注意：

函数表达式

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

回调函数

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

三、环境对象

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

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

代码样例：

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

btn.addEventListener('click', function () {
    this.style.backgroundColor='red'
})

⭐注意：

函数的调用方式不同，this 指代的对象也不同；
【谁调用， this 就是谁】是判断 this 指向的粗略规则；
直接调用函数，其实相当于是 window.函数，所以 this 指代 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>

具体效果：
在这里插入图片描述
升级版本思想：

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

升级代码样例：

<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>