前端学习--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 失去焦点

小米搜索框





    
    
    
    Document
    




    
    


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字

 四、环境对象

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

普通函数中this指向window

谁调用,this指向谁

五、回调函数

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

综合案例 -- tab栏切换





  
  
  
  tab栏切换
  



  
  


你可能感兴趣的:(前端,javascript,学习)