事件监听

概念

事件：事件是在编程时系统内发生的动作或者发生的事情

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

使用

语法：元素对象.addEventListener('事件类型', 函数)

事件监听三要素：

• 事件源： 触发事件的元素
• 事件类型： 触发事件的动作/行为，比如鼠标单击 click、鼠标经过 mouseover 等
• 事件调用的函数： 要做什么事,执行代码

注意：

1. 事件类型要加引号
2. 函数是触发之后再去执行，每次触发都会执行一次
   • 函数写法1：function() {执行代码}
   • 函数写法2：函数名 注意：不加小括号，加小括号立即执行，这里是触发执行

<input type="button" value="点击">
  <script>

    // 获取元素
    const btn = document.querySelector('input')
    btn.addEventListener('click',function () {
      console.log('hellow~')
    })
  </script>

完成事件监听分成3个步骤：

1. 获取 DOM 元素
2. 通过 addEventListener 方法为 DOM 节点添加事件监听
3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型，事件触发后，相对应的回调函数会被执行

大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

事件类型

鼠标事件

鼠标触发

1. click:单击事件,dblclick：双击事件
2. mouseenter:当鼠标移动到元素上时，发生此事件
3. mouseleave:当用户将鼠标指针移出元素时，发生此事件
4. mousemove:当指针在元素上方移动时，发生此事件。
5. mouseup:当用户在元素上释放鼠标按钮时，发生此事件。
6. mousedown:当用户在元素上按下鼠标按钮时，发生此事件。
7. mouseover:当鼠标移动到元素或其中的子元素上时，发生此事件
8. mouseout:当用户将鼠标指针移出元素或其中的子元素时，发生此事件

mouseover 和 mouseout 会有冒泡效果(子到父)

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

<div>
    <p>123</p>
  </div>

<script>
     const div = document.querySelector("div")

    //  监听事件
    // mouseenter
     div.addEventListener('mouseenter', function () {
       div.style.background = 'skyblue'
     })

     // mouseleave
     div.addEventListener('mouseleave', function () {
       div.style.background = 'pink'
     })

     // mousemove
     div.addEventListener('mousemove', function () {
      //  console.log( Math.random())
     })

     // mousedown
     div.addEventListener('mousedown', function () {
       console.log( 'mousedown')
     }) 

     // mouseup
     div.addEventListener('mouseup', function () {
       console.log('mouseup')
     }) 
     
     // mouseover
     div.addEventListener('mouseover', function () {
       div.style.background = 'blue'
     })

     // mouseout
     div.addEventListener('mouseout', function () {
       div.style.background = 'green'
     })
  </script>

焦点事件

表单获得光标

focus 获得焦点

blur 失去焦点

  <input type="text">
  <script>
    const input = document.querySelector('input')

    // focus:获得焦点
    input.addEventListener('focus',function () {
      input.style.background = 'red'
    })

    // blur：失去焦点
    input.addEventListener('blur',function () {
      input.style.background = 'green'
    })
  </script>

键盘事件

键盘触发

Keydown 键盘按下触发

Keyup 键盘抬起触发

  <script>
    document.addEventListener('mousedown',function () {
      console.log('mousedown 键盘按下')
    })

    document.addEventListener('mouseup',function () {
      console.log('mouseup 键盘抬起')
    })
  </script>

文本事件

表单输入触发

input 用户输入事件

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // input:文本事件
    input.addEventListener('input',function () {
      console.log(input.value)
    })
  </script>

事件对象

概念

事件对象：事件触发时产生的对象，这个对象里有事件触发时的相关信息

获取事件对象

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

一般命名为event、ev、e

事件对象常用属性

1. type：获取当前的事件类型
2. clientX/clientY获取光标相对于浏览器可见窗口左上角的位置
3. offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

<style>
    body {
      height: 3000px;
    }
  </style>

<script>
    // e:接收的是事件对象

    document.addEventListener('click', function (e) {
      // e.type:事件类型
      console.log(e.type)
      // clientX,clientY:鼠标相对于浏览器（可视窗口）左上角的位置
      console.log(e.clientX,e.clientY)
      // pageX,pageY:鼠标相对于文档左上角的位置
      console.log(e.pageX,e.pageY)
      // offsetX,offsetY:鼠标相对于当前DOM元素左上角的位置
      console.log(e.offsetX,e.offsetY)
    })

4. key：用户按下的键盘键的值

   现在不提倡使用keyCode

    document.addEventListener('keydown', function (e) {
      // key：用户按下的键盘键的值
       console.log(e.key)
      if ( e.key === 'q' ) {
        console.log('qqqq技能')
      }
      
      // 现在不提倡使用keyCode
      // ASCII
      console.log(e.keyCode)
    })

环境对象

概念

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

this的指向:调用函数的元素

1. 函数的调用方式不同，this 指代的对象也不同，事件处理函数中的this，指代事件源
2. 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
3. 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<div>123</div>
  <p>段落</p>
  <script>
    const div = document.querySelector('div')
    const p = document.querySelector('p')

    // 事件处理函数中的this，代表事件源
    div.addEventListener('click', function () {
      console.log(this)
    })

    p.addEventListener('click', function () {
      console.log(this)
    })

    document.addEventListener('click', function () {
      console.log(this)
    })

  </script>

回调函数

概念

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

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

    function fn ( n ) {
      console.log(n)
    }

    function getNum() {
      console.log('aaa')
    }
    fn( 3 )
    fn('hellow')
    fn(getNum)

函数 getNum 做参数传给了 fn 函数,fn 就是所谓的回调函数了！！！

我们回顾一下间歇函数 setInterval

<script>
	function fn() {
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

<script>
  // 调用定时器，匿名函数做为参数
  setInterval(function () {
    console.log('我是回调函数...');
  }, 1000);
</script>

结论：

1. 回调函数本质还是函数，只不过把它当成参数使用
2. 使用匿名函数做为回调函数比较常见

函数分为

• 具名函数：function 函数名() {}

  调用函数：函数名()

• 匿名函数： function () {}

  匿名函数调用：

  1. 赋值给变量（函数表达式） const fn = function () {}
  2. 自调用函数/自执行函数/立即执行函数

​ ;(function () {}())

​ ;(function () {})()

标签：function,console,log,DOM,事件,addEventListener,函数
来源： https://www.cnblogs.com/yyshow/p/16268517.html