Dom事件基础

事件监听

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件

  1、语法：

  元素对象.addEventListener

  事件监听三要素

    事件源： 那个dom元素被事件触发了，要获取dom元素

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

    事件处理程序： 要做什么事

// 点击button  更改p里面的文字颜色
    // 事件源
    const button = document.querySelector('button')
    const p = document.querySelector('p')
    const int = document.querySelector('input')
    // 事件类型
    button.addEventListener('click',function(){
      p.style.fontSize = '50px'
      p.style.color = 'aqua'
    })

    注意：

      (1). 事件类型要加引号

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

  2、事件类型

    (1)鼠标触发

        click 鼠标点击

        mouseenter 鼠标经过

        mouseleave 鼠标离开

// 选中div
    const div = document.querySelector('div')
    // 添加鼠标移入效果
    div.addEventListener('mouseenter',function(){
      console.log('那可是我的挚爱亲朋，手足兄弟呀')
    }) 
    div.addEventListener('mouseleave',function(){
      console.log('公公误会了，得加钱！')
    })

    (2)焦点事件

        focus 获得焦点

        blur 失去焦点

 // 事件源  获取元素
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')

    // 事件类型 
    // 获取焦点  opacity 1
    tx.addEventListener('focus',function(){
      total.style.opacity = 1
    })
    // 失去焦点 opacity 0
    tx.addEventListener('blur',function(){
      total.style.opacity = 0
    })

    (3)键盘事件

        Keydown 键盘按下触发

        Keyup 键盘抬起触发

// 获取元素
      const input = document.querySelector('input')
      // 注册键盘事件
      input.addEventListener('keydown',function(){
        console.log('当键盘按下的时候显示')
      })
      input.addEventListener('keyup',function(){
        console.log('当键盘抬起的时候显示')
      })
      input.addEventListener('input',function(){
        console.log('111')
        // 获取文本的内容
        console.log(input.value)
        // 获取文本的长度
        console.log(input.value.length)
      })

    (4)文本事件

        input 用户输入事件

  3、事件对象

    它也是个对象，其中事件触发时的相关信息

    例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

    元素对象.addEventListener('事件类型',function(e){})

    其中的  e  就是事件对象

    部分常用属性

        key                 用户按下的键盘键的值

        type                获取当前的事件类型

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

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

// 事件对象：事件发生时有一些数据是保存到一个对象里面的
    /* 在时间绑定的回调函数的第一个参数就是事件对象 */
    const button = document.querySelector('button')
    button.addEventListener('click',function(e){
      console.log(e)
    })

    const input = document.querySelector('input')
    input.addEventListener('keyup',function(e){
      console.log(e)
      console.log(e.key)
      // 如果用户按下了回车键，控制台输出“我按下了回车键”
      if(e.key === 'Enter'){
        console.log('我按下了回车键');
      }
    })

  4、环境对象

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

    弄清楚this的指向，可以让我们代码更简洁

    谁调用， this 就是谁   是判断 this 指向的粗略规则

// 每个函数里面都有this 环境对象
    //  1 普通函数 里面this指向window
    function fn(){
      console.log(this)
      console.log(123456)
    }
    fn()

    // 2 事件从处理函数  this指向   this指向事件源
    const  button = document.querySelector('button')
    
    button.addEventListener('click',function(){
      console.log(this)
      button.style.color = 'red'
      this.style.color = 'red'
    })
    // this指向   谁调用我，我就指向谁

  5、回调函数

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

    回调函数本质还是函数，只不过把它当成参数使用

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

function fn() {
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了