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

Web APIs基础学习二

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

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

文章目录

一、事件

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

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

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

1. 事件监听

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

基础语法结构：

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

⭐事件监听三要素：

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

样例代码：

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

具体效果：

⭐注意：

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

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. 鼠标事件
2. 焦点事件
3. 键盘事件
4. 文本事件

具体如图所述：

⭐注意：

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

二、高阶函数

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

1. 函数表达式

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

代码样例：

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

⭐注意：

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

2. 回调函数

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

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

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

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

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

⭐注意：

1. 函数表达式

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

1. 回调函数

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

三、环境对象

基础概念： 环境对象指的是函数内部特殊的变量

this

，它代表着当前函数运行时所处的环境；

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

代码样例：

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

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

⭐注意：

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

总结

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

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

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