事件与定时器

事件

事件监听

什么是事件

事件是在编程时系统内发生的动作或者发生的事情，比如点击按钮 click ，焦点事件 focus

什么是事件监听

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法

元素.addEventListener('事件',要执行的函数)

事件监听三要素

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

注意

事件类型要加引号

函数是点击之后再去执行，每次点击都会执行一次

我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，而是事件处理机制监听到事件触发之后再调用的

如果为元素重复绑定同一个事件，那么后面绑定的事件会覆盖前面的事件 => 不允许为元素绑定同名事件

监听版本

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

不能设置在什么阶段触发事件：事件捕获、事件冒泡

    let btn = document.querySelector('button')

    btn.onclick = function() {
        console.log(123);
    };
    btn.onclick = function() {
        console.log(456);
    };

最终输出456，123被覆盖了。

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

有兼容性，IE678不兼容

    btn.addEventListener('click', function() {
        console.log(123);
    })
    btn.addEventListener('click', function() {
        console.log(123);
    })

最终输出123456。

事件类型

click :鼠标单击
dblclick :鼠标双击
mouseenter :鼠标进入
mouseleave :鼠标离开
keydown :按键按下
keyup :按键松开
focus :聚焦事件
blur :失焦事件
input :内容改变事件
change :
1. 普通的输入框：内容改变同时失焦
2. 对于 file: 文件选择完毕之后

定时器

定义

每隔一段时间需要自动执行一段代码，不需要我们手动去触发

let timeId = setinterval()

关闭定时器

clearInterval(定时器变量名)

总结

事件与定时器.png

习题解析

全选反选案例

图例.png 效果如上图所示，点击全选框后下面的复选框都会被选中，全选字样改为取消；点击单个复选框时全选框无变化，复选框全被点击后全选框被勾选，取消字样改为全选。

题目解析：

获取元素，总共要获取三个元素， span 标签、全选框与复选框。
为全选框绑定点击事件，触发点击事件后执行回调函数：
1. 获取全选框的选中状态 .checked 。
2. 让所有复选框的选中状态等于全选框的选中状态，从而实现点击全部选中和取消。
3. 三元表达式判断，更改 span 标签的文本。
利用循环遍历获取所有复选框的伪数组，得到每一项 dom 元素，为其绑定点击事件，触发事件后执行回调函数：
1. 设置一个变量 flag ，用于判断是否所有复选框都被选中，初始值为 true ，默认为都被选中了。
2. 再次循环所有复选框，同时进行判断，只要有一个复选框没被选中，则把 flag 改为 false 。
3. 让全选框的选中状态等于 flag 。

代码展示：

        // 获取事件源
        let checkAll = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let all = document.querySelector('.all')

        // 点击全选框后判断全选框的选中状态
        checkAll.addEventListener('click', function() {
            let status = this.checked
            cks.forEach(ele => {
                ele.checked = status
            })
            all.innerHTML = status ? '取消' : '全选'
        })

        // 利用forEach进行循环遍历判断每个复选框的选中状态
        cks.forEach(element => {
            element.addEventListener('click', function() {
                let flag = true
                cks.forEach(ele => {
                    if (ele.checked === false) {
                        flag = false
                    }
                })
                all.innerHTML = flag ? '取消' : '全选'
                checkAll.checked = flag ? true : false
            })
        })

随机点名-定时器版

随机点名.png

效果如上图所示，点击开始按钮框内自动刷新名字，点击结束按钮停止刷新。重复这几步直到全部名字都被选中。