事件监听

概念

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

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

使用

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

事件监听三要素：

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

注意：

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

完成事件监听分成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 没有冒泡效果 (推荐)

    
123
  

焦点事件

表单获得光标

focus 获得焦点

blur 失去焦点

键盘事件

键盘触发

Keydown 键盘按下触发

Keyup 键盘抬起触发

文本事件

表单输入触发

input 用户输入事件

事件对象

概念

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

获取事件对象

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

一般命名为event、ev、e

事件对象常用属性

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

回调函数

概念

如果将函数 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

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

结论：

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

函数分为

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

  调用函数：函数名()

• 匿名函数： function () {}

  匿名函数调用：

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

? ;(function () {}())

? ;(function () {})()