DOM事件基础-事件监听（绑定）

前端菜市场
221 阅读2分钟
  • 事件：
    • 事件是在编程时系统内发生的动作或者发生的事情
    • 比如用户在网页上单击一个按钮
  • 事件监听：
    • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应
    • 也称为 绑定事件 或者 注册事件
    • 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法：元素对象.addEventListener(‘事件类型’, 要执行的函数)

  • 事件监听三要素：
    • 事件源： 哪个dom元素被事件触发了，要获取dom元素
    • 事件类型： 用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
    • 事件调用的函数： 要做什么事

注意：

  1. 事件类型要加引号
  2. 函数是点击之后再去执行，每次点击都会执行一次

举例说明

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      console.log('点击了一下')
    })
</script>

事件监听版本

  • DOM L0
    • 事件源.on事件 = function() { }
  • DOM L2
    • 事件源.addEventListener(事件， 事件处理函数)
  • 两种注册事件的区别
    • 传统on注册（L0）
      • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
      • 直接使用null覆盖偶就可以实现事件的解绑
      • 都是冒泡阶段执行的
    • 事件监听注册（L2）
      • 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
      • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
      • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
      • 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
      • 匿名函数无法被解绑

事件类型

image.png

鼠标经过事件还有两种： mouseover 和 mmouseout

  • 鼠标经过事件区别：
    • mouseover 和 mouseout 有冒泡效果
    • mouseenter 和 mouseleave 没有冒泡效果（推荐）

什么是冒泡详见： DOM进阶-事件流

事件对象

  • 事件对象是什么
    • 也是个对象，这个对象里有事件触发时的相关信息
    • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
  • 使用场景
    • 可以判断用户按下哪个键，比如按下回车键可以发布新闻
    • 可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象

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

一般命名为event、ev、e

元素.addEventListener('click', function(e){
    // 形参 e 就是事件对象
})
  • 部分常用属性
  • type：
    • 获取当前的事件类型
  • clientX/clientY：
    • 获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY：
    • 获取光标相对于当前DOM元素左上角的位置
  • key：用户按下的键盘键的值
    • 现在不提倡使用keyCode
avatar
文章
阅读
粉丝