JavaScript —— APIs（二）

一、  事件监听

（一）定义

【综合】

（二）【点击关闭案例】

【效果图】 点 X 时，关闭整个盒子

【代码】

（三）【随机点名案例】

将数组中随机抽到的元素写到 qs 元素中

黄框中为定时器

开启模块

这样可以实现点击开始按钮，数组中的元素迅速滚动

注意：抽取随机数，要在点击开始按钮的里面。要点击了之后，再开始抽取随机数

在定时器外面声明一个全局变量，方便之后可以关闭定时器

关闭模块

删除掉当前抽取的那个数组元素

当数组里面只剩下一个值时，就不再抽取了，两个按钮都禁用

写在开始模块区域里  

 （四）事件监听版本 

后面会覆盖掉前面的

二、事件类型

（一）鼠标事件

由鼠标触发

click  鼠标点击

mouseenter  鼠标经过

mouseleave  鼠标离开

【完整版轮播图案例】

第一部分：右侧按钮

第二部分：左侧按钮

左侧和右侧的渲染代码一致，声明一个渲染数据的函数，简化代码

第三部分：自动播放轮播图

   

使用JS，自动调用 点击右侧按钮

第四部分：鼠标经过时，停止播放；鼠标移走，继续播放

关闭了一次定时器之后，再开启第二次是，最好先写一个关闭定时器，然后在开启定时器

注意：蓝色的为第二次开启定时器的方法

           即：把声明定时器部分复制一遍，但是不要复制 let

（二）焦点事件

focus  获得焦点

blur  失去焦点

【小米搜索框案例】

                      

点击时，菜单出现，并且边框变为search守护星里面的颜色

不点击文本框时，不显示下拉菜单

（三）键盘事件  

检测键盘有没有被按下

键盘触发

Keydown  键盘按下触发

Keyup  键盘抬起触发 

（四）文本事件

表单输入触发

input  用户输入事件

当用户在文本框中，输入内容时，打印123

使用 input . value 可以获得用户在文本框中输入的每一个值

【评价数字统计案例 】 

注意：想要实现，点击文本框时，文本框变长，用以下代码

设置 opacity = 0 或者 = 1 (透明度）再加上transition：all .5s  可以实现点击出现，不点击就消失的效果

文本框 . value 可以获得文本框里面的内容

文本框 . value . length 可以获得文本框中内容的长度

三、事件对象

（一）获取事件对象

 【总结】

注意：只有事件中函数的第一个参数是事件对象

如果不在，则第一个参数就是一个普通的形参

（二）常见的事件对象属性

可以知道你按了键盘的哪个键

按了回车键，才会发表评论，按键盘上的别的其他键，都不会发表

【评论回车发布案例】

按下回车，输出内容，并且清空文本域

trim（ ）

去除左右两侧的空格，文字中间的空格不去除

防止打印出一串空字符串

若打印字符串时，两边有空字符串，则删去这些字符串，不输出；若文字中间有字符串，则保留下来

按下回车后，字数清零

四、环境对象 this

 【示例】

五、回调函数

这个也是一个回调函数

六、综合案例

谁被选上了，谁就添加 active 属性 ，不添加的盒子为 none 不显示

（一）给每个小 a 都添加鼠标经过事件

注意：document.querySelectorAll 可以获取多个数据，并且将这些数据，变为一个伪数组

（二） 点哪个标题，哪个标题添加高亮效果

（先删除再添加）

注意：要将这部分写在遍历数组里面，可以在5个 a 里面任意选

要是写在外面的话，就会出现，不论怎么刷新页面，都只会选中第一个 a 的效果

（三）点上面标题，点哪个标题一一对应哪一个大盒子

注意：nth-child 是从 1 开始的，但是数组排序是从 0 开始的。

           所以应用时，注意要用 nth-child（i + 1）

七、【全选文本框案例】

（一）大按钮控制小按钮

【完整代码】

 

注意：checked 是选项框是否被选中的一个属性

           选中结果为 true 没有选中结果为 false  

注意：点击时可以获得大复选框的 checked ，可以将大复选框的 checked 效果给到小复选框

 这样可以实现，选中大复选框时，所有小复选框都被选中；取消大复选框时，所有小复选框都不会被选中

this 只有在函数里面才会有，并且指向时间的调用者

css补充知识

：checked 伪类选择器 ，选择被勾选的复选框，谁被勾选，谁改变样式

 

（二）小按钮控制大按钮

注意：input:checked 等于几，就有几个复选框被选中

 打印被选中的复选框个数

黄框部分：大复选框是否被选中，若后面结果为 true 则被选中；若后面结果为 false 则大复选框没有被选中

蓝框部分：选取复选框被选中的个数，是否等于所有小复选框数组的长度（即小复选框的个数）等于返回 true 不等于返回 false

好啦！ 这次的分享就到这里啦！下次我们不见不散！！！