Javascript的API基本内容（二）

目录

 一、事件监听

 二、事件类型

（1）鼠标事件

mouseover 和 mouseenter 的区别

（2）键盘事件

（3）焦点事件

（4）文本框输入事件

三、轮播图提升版

四、事件对象

五、tab鼠标经过显示不同的板块案例

 一、事件监听

 结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】

 二、事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等

（1）鼠标事件

mouseover 和 mouseenter 的区别

• mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout
• mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave
   

（2）键盘事件

keydown 键盘按下触发 keyup 键盘抬起触发

（3）焦点事件

focus 获得焦点

blur 失去焦点

（4）文本框输入事件

input

三、轮播图提升版

• 实现鼠标移入停止定时器轮播
• 实现鼠标移出开始定时器轮播
• 实现点击左右图标实现切换图片

  
    
    
    
    
    
  

  
    

      

        
      
      

        
对人类来说会不会太超前了？
        

          

          

          

          

          

          

          

          

        
        

          <
          >
        
      
    
    
  

四、事件对象

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

接下来简单看一下事件对象中包含了哪些有用的信息：

1. ev.type 当前事件的类型

2. ev.clientX/Y 光标相对浏览器窗口的位置

3. ev.offsetX/Y 光标相于当前 DOM 元素的位置

注：在事件回调函数内部通过 window.event 同样可以获取事件对象

  
事件对象
  
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
  

  

  

五、tab鼠标经过显示不同的板块案例

    

      

        
每日特价
        

          
精选
          
美食
          
百货
          
个护
          
预告