Web APIs day2 | Dom事件基础 (事件监听、事件对象、环境对象、回调函数)

学习目标: 掌握事件绑定处理和事件对象，完成常见网页交互

目录

1 事件监听（绑定）

1.1 事件监听

1.2  拓展阅读-事件监听版本

2 事件类型

3 事件对象

3.1 获取事件对象

3.2 事件对象常用属性

4 环境对象

5 回调函数

综合案例

---

1 事件监听（绑定）

1.1 事件监听

目标：能够给 DOM元素添加事件监听

什么是事件？

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

什么是事件监听？

• 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

- 语法:

- 事件监听三要素：

• 事件源： 那个dom元素被事件触发了，要获取dom元素( 用户/浏览器采取的动作 )
  • 'click'  单击
  • 'dblclick'  双击
• 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
• 事件处理函数： 要做什么事

如:

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

案例 京东点击关闭顶部广告

需求：点击关闭之后，顶部关闭

分析：

①：点击的是关闭按钮

②：关闭的是父盒子

核心：利用样式的显示和隐藏完成，

        display:none 隐藏元素 display:block 显示元素   (display 处理的元素不占有位置)

1.2  拓展阅读-事件监听版本

• DOM L0

        事件源.on事件 = function() { }

• DOM L2

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

• 区别：

        on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

发展史：

DOM L0 ：是 DOM 的发展的第一个版本； L：level

DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准

DOM L2：使用addEventListener注册事件

DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

2 事件类型

学事件类型就是学触发事件.

案例 轮播图点击切换

需求：当点击左右的按钮，可以切换轮播图

分析：

①：右侧按钮点击，变量++，如果大于等于8，则复原0

②：左侧按钮点击，变量--，如果小于0，则复原最后一张

③：鼠标经过暂停定时器

④：鼠标离开开启定时器

案例 小米搜索框案例

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

分析：

①：开始下拉菜单要进行隐藏

②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）

③：表单失去焦点，反向操作

案例 同意协议

案例3 评论字数统计

需求：用户输入文字，可以计算用户输入的字数

分析：

①：判断用户输入事件 input

②：不断取得文本框里面的字符长度, 文本域.value.length

③：把获得数字给下面文本框

案例4 仿京东显示隐藏密码

法一:标记法

法二:计数法

3 事件对象

3.1 获取事件对象

目标：能说出什么是事件对象

事件对象是什么

• 也是个对象，事件触发时产生的对象
• 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息 

使用场景

• 可以判断用户按下哪个键，比如按下回车键可以发布新闻
• 可以判断鼠标点击了哪个元素，从而做相应的操作

语法：如何获取

3.2 事件对象常用属性

目标：能够使用常见事件对象属性

部分常用属性:

• type   获取当前的事件类型

  console.log (e.type)

• pageX/pageY   获取光标相对于文档(全部内容)左上角的位置
• clientX/clientY   获取光标相对于浏览器可见窗口左上角的位置
• offsetX/offsetY   获取光标相对于当前DOM元素左上角的位置
• key 用户按下的键盘键的值
  • (现在不提倡使用keyCode→按键编码,但是无法处理用户自定义按键)

案例1 评论回车发布

需求：按下回车键盘，可以发布信息

分析：

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

4 环境对象

目标：能够分析判断函数运行在不同环境中 this 所指代的对象

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

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

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

当前学习 事件处理函数里面的this,指向当前事件源

如多个元素,不能直接给多元素伪数组加,可以遍历数组

5 回调函数

目标：能够说出什么是回调函数

回顾-函数分类:

把当做参数的函数称为回调函数,把别的函数当参数的函数为高阶函数

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

常见的使用场景:

• 回调函数本质还是函数，只不过把它当成参数使用
• 使用匿名函数做为回调函数比较常见

综合案例

全选文本框案例

注:      查看属性时.checked    / css中用属性伪类 :checked 

        // 获取元素
        const checkAll = document.querySelector('#checkAll');
        const cks = document.querySelectorAll('.ck');

        // 大的选中→小的全选
        checkAll.addEventListener('click', function () {
            const flag = checkAll.checked;

            // 直接写法
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = flag  //直接用大按钮的flag值,省去分类
            }


            // if写法
            // if (flag) {
            //     for (let i = 0; i < cks.length; i++) {
            //         cks[i].checked = true
            //     }
            // }
            // else {
            //     for (let i = 0; i < cks.length; i++) {
            //         cks[i].checked = false
            //     }
            // }
        })


        // 小的全选,大的选中
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                const len1 = cks.length;
                // :checked 伪类选择器
                const len2 = document.querySelectorAll('.ck:checked').length
                // 直接写  (len1 === len2)输出的已经是布尔值,直接用就可以
                checkAll.checked = (len1 === len2)

                // if写法
                // if (len1 === len2) {
                //     checkAll.checked = true
                // }
                // else {
                //     checkAll.checked = false
                // }

            })
        }