前端学习--JS入门(5) 事件监听/事件类型/事件对象

一、事件监听

事件是系统运行时发生的动作或者发生的事情

1.1 事件监听

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

 三要素：

事件源--获取被触发的dom元素

事件类型--触发方式（比如click/mouseover）

事件调用函数--触发了做什么事

案例-随机点名

    
    
    
    
    


    

        
随机点名
        

            名字是：
            
        
        

            开始
            停止
        
    
    

1.2 事件监听版本

//DOM L0
事件源.on事件 = function(){}

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

//on的方式多次写入被覆盖，add可以绑定多次拥有更多特性

二、事件类型

2.1 鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

终极版轮播图

  
  
  
  
  



  

    

      
    
    

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

        

        

        

        

        

        

        

        

      
      

        <
        >
      
    
  
  

2.2 焦点事件-表单获得光标

focus 获得焦点

blur 失去焦点

小米搜索框

    
    
    
    
    




    

        
        

            
全部商品
            
小米11
            
小米10S
            
小米笔记本
            
小米手机
            
黑鲨4
            
空调
        
    
    

2.3 键盘事件

keydown键盘按下触发

keyup 键盘抬起触发

2.4 文本事件

input 用户输入触发

const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
tx.addEventListener('focus',function(){
   total.style.opacity = 1
})
tx.addEventListener('blur',function(){
   total.style.opacity = 0
})
tx,addEventListener('input',function(){
    total.innerHTML = `${tx.value.length}/200字`
})

三、事件对象 

包含事件触发时相关信息的对象，比如用户按下哪个键、鼠标点击哪个元素

3.1 获取事件对象

//事件绑定的回调函数的第一个参数就是事件对象
//e就是事件对象
元素.addEventListener('click',function(e){

})

3.2 事件对象常用属性

type	获取当前的事件类型
clientX/clientY	获取光标相对于浏览器左上角的位置
offsetX/offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下键盘键的值

 案例-评论发布

  
  
  
  
  



  

    
    
    发布
  
  

    0/200字
  
  

    

      
      

        
清风徐来
        
大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
        
2022-10-10 20:29:21
      
    
  
  

 四、环境对象

this--当前函数运行时所处的环境

普通函数中this指向window

谁调用，this指向谁

五、回调函数

当一个函数做参数传递给另一个函数时，这个函数是回调函数

综合案例 -- tab栏切换

  
  
  
  
  



  

    

      
每日特价
      

        
精选
        
美食
        
百货
        
个护
        
预告