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

1、事件监听

什么是事件？

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

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

什么是事件监听？

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

1.1 基本语法

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

事件监听三要素：

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

    点击
    

1.1.1 事件类型 

 鼠标经过，与鼠标离开

1.2 练习 

京东点击关闭顶部广告

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

  
  
  
  
  



  

    我是广告
    
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、随机点名案例

分析：

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

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

    
    
    
    



    
随机点名
    

        名字是：
        
这里显示姓名
    
    

        开始
        结束