WebAPIs 第二天

DOM事件基础

  • 事件监听
  • 事件类型
  • 事件对象

 一.事件监听

① 概念:就是让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出响应,也成为绑定事件或者注册事件

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

③ 事件监听三要素:

  (1)事件源:哪个DOM元素被事件触发了,要获取dom元素

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

  (3)事件调用的函数:要做什么事

④ 注意:

  • 事件类型要加引号
  • 函数是触发一次就执行一次
const btn = document.querySelector('button')
   btn.addEventListener('click', function() {
   alert('你好呀')
})

⑤ 事件监听版本(拓展)

  • DOM L0    

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

  • DOM L2

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

  • 区别

    on 方式会被覆盖,addEventListenner 方式可绑定多次,拥有事件更多特性,推荐使用

二.事件类型

① 鼠标事件:鼠标触发

  • click 鼠标点击
  • mouseenter 鼠标经过
  • mouseleave 鼠标离开
const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter', function () {
    console.log('hello')
})
// 鼠标离开
div.addEventListener('mouseleave', function () {
    console.log('走了')
})

② 焦点事件:表单获得光标

  • focus 获得焦点
  • blur 失去焦点
 // 获得焦点和失去焦点
const input = document.querySelector('input')
input.addEventListener('focus', function () {
    console.log('获得焦点')
})

input.addEventListener('blur', function () {
    console.log('失去焦点')
})

③ 键盘事件:键盘触发

  • keydown 键盘按下触发
  • keyup 键盘抬起触发
const input = document.querySelector('input')
input.addEventListener('keydown', function () {
   console.log('键盘按下')
})
input.addEventListener('keyup', function () {
     console.log('键盘弹起')
})

④ 文本事件:表单输入触发

  • input 用户输入事件
const input = document.querySelector('input')
input.addEventListener('input', function () {
    console.log(input.value)
})

 三.事件对象

 1.获取事件对象

 2.事件对象常用属性

3.1 获取事件对象

① 事件对象概念

  • 也是个对象,这个对象有事件触发时的相关信息

② 使用场景

  • 可以判断用户按下哪个键或者点击了哪个元素

③ 如何获取

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event,ev, e

 ④ 语法

元素.addEventListener('click', function(e) {
})

3.2 事件对象属性

  • type      获取当前的事件类型
  • clientX/clientY    获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY   获取光标相对于DOM元素左上角的位置
  • key     用户按下的键盘键的值(不推荐)

四.环境对象 

  • 环境对象:指的是函数内部特殊的变量this,代表当前函数运行时所处的环境
  • 作用:弄清楚this的指向,可以使代码更加简洁
  • 函数的调用方式不同,this指代的对象也不同
  • 【粗略规则】谁调用this就指向谁

五.回调函数

① 概念:如果将函数A作为参数传递给函数B时,将函数A称为回调函数

② 使用匿名函数作为回调函数比较常见

你可能感兴趣的:(前端)