Day2 WebAPIs:事件、环境对象、回调函数

2.事件、环境对象、回调函数

  • 什么是事件?

    时间是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮

  • 什么是事件监听?

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

2.1 事件监听(绑定)
  • 语法 元素对象.addEventListener('事件类型',要执行的函数)

  • 事件监听三要素

    • 事件源:那个dom元素被事件触发了,要获取dom元素

    • 事件类型:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等

    • 事件调用函数:要做什么事

注意:1.事件类型要加引号

2.函数是点击之后再去执行,每次点击都会执行一次



​

    
    
    Document

​

    
    

随机点名案例



​

    
    
    Document

​

    

随机点名

   
       名字是:        
这里显示姓名
   
   
                   
​    

事件监听版本

  • DOM L0

    事件源.on事件=function( ){ }

  • DOM L2

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

  • 区别:on方式会被覆盖,addEventListener方式可绑定多次,拥有时间更多特性,推荐使用

2.2 事件类型

鼠标事件:鼠标触发、click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开

焦点事件(表单获得光标):focus获得焦点、blur失去焦点



​

    
    
    Document
    

​

    
                   
   

键盘事件(键盘触发):Keydown键盘按下触发、Keyup键盘抬起触发



​

    
    
    Document

​

    
    

2.3 事件对象
  • 获取事件对象

语法:如何让获取

(1)在事件绑定的回调函数的第一个参数就是事件对象

(2)一般命名为event、ev、e

元素.addEventListener('click',function(事件对象名){ })

  • 事件对象常用属性

(1)type:获取当前的事件类型

(2)clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置

(3)offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置

(4)key:用户按下的键盘的值,现在不提倡使用keyCode

  • 小知识点:对象名.trim() 去除文本空格



​

    
    
    Document

​

    
2.4 环境对象

目标:能够判断函数运行在不同环境中this所指代的对象

环境对象:指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境

谁调用,this就是谁



​

    
    
    Document

​

    
    
2.5 回调函数

如果将函数A做为参数传递给函数B时,我们称函数A为回调函数

2.6 综合案例

复选框案例



​

    
    
    Document
    

​

    
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
    
                全选            商品商家价格
                           小米手机小米¥1999
                           小米净水器小米¥4999
                           小米电视小米¥5999
   

你可能感兴趣的:(javascript,前端,开发语言)