Web APIs——事件监听以及案例

1、事件监听

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

什么是事件监听？

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

1.1 基本语法

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

事件监听三要素：

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


    <button>点击button>
    <script>
        // 需求：点击了按钮，弹出一个对话框
        // 1. 事件源  按钮
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('今天吃什么？')
        })
        // 2. 事件类型 点击鼠标
        // 3. 事件处理程序 弹出对话框
    script>

1.1.1 事件类型

鼠标经过，与鼠标离开


DOCTYPE html>
    
    
    Document

1.2 练习

京东点击关闭顶部广告

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


DOCTYPE html>
 
  
  
  
  Document
  
 
  
    我是广告
    X

2、拓展阅读-事件监听版本

2.1 事件监听版本

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级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3、随机点名案例

分析：

点击开始按钮随机抽取数组的一个数据，放到页面中
点击结束按钮删除数组当前抽取的一个数据
当抽取到最后一个数据的时候，两个按钮同时禁用（写点开始里面，只剩最后一个数据不用抽了）

核心：利用定时器快速展示，停止定时器结束展示


 
DOCTYPE html>
 
    
    
    Document
    
 
    随机点名
    
        名字是：
        这里显示姓名