DOM事件

目录

1. 事件监听

2. 事件类型

 3. 事件对象

3.1 获取事件对象

3.2 事件对象常用属性


1. 事件监听

什么是事件?
事件就是 浏览器 或 用户做出的事情,比如:用户在网页上 单击 一个按钮。
什么是事件监听?
就是让程序监测是否有事件产生,一旦有 事件触发 ,就立即调用一个函数 做出响应 ,也称为 绑定事件 或者 注册事件。 即, 监听用户的行为,做出反馈 ,比如:鼠标经过显示下拉菜单、点击按钮可以播放轮播图等等。
事件监听三要素:
  • 事件源:哪个dom元素身上发生了事件
  • 事件类型:发生了什么事件,比如:鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数:要做出什么反馈

事件监听

语法:

举例:

2. 事件类型

 3. 事件对象

事件对象是什么
  • 当一个事件发生后,跟 事件相关的信息并记录到了一个对象 中,这个对象就是“事件对象
  • 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
使用场景
  • 可以判断用户按下哪个键,比如:按下回车键可以发布评论
  • 可以判断鼠标点击了哪个元素,从而做相应的操作
3.1 获取事件对象
语法:
  • 在事件绑定的回调函数,其第一个参数就是事件对象
  • 一般命名为event、ev、e、evt

3.2 事件对象常用属性
部分常用属性:
  • type
    • 获取当前的事件类型
  • clientX/clientY
    • 获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY
    • 获取光标相对于当前DOM元素左上角的位置
  • key
    • 用户按下的键盘键的值
    • 现在不提倡使用keyCode

相关推荐

  1. <span style='color:red;'>DOM</span><span style='color:red;'>事件</span>

    DOM事件

    2024-05-01 21:24:06      11 阅读
  2. HTML DOM 事件

    2024-05-01 21:24:06       7 阅读
  3. <span style='color:red;'>DOM</span>

    DOM

    2024-05-01 21:24:06      22 阅读
  4. 最新Unity DOTS Physics物理引擎碰撞事件处理

    2024-05-01 21:24:06       40 阅读
  5. DOTS Unity.Physics物理引擎碰撞事件处理

    2024-05-01 21:24:06       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-01 21:24:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-01 21:24:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-01 21:24:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-01 21:24:06       20 阅读

热门阅读

  1. 为什么MySQL使用B+树而不是跳表

    2024-05-01 21:24:06       9 阅读
  2. Ansible playbook之变量引用

    2024-05-01 21:24:06       10 阅读
  3. 聊聊服务器散热方案的演进

    2024-05-01 21:24:06       12 阅读
  4. 第15届蓝桥杯-蒟蒻の反思与总结

    2024-05-01 21:24:06       34 阅读
  5. Python实现的人脸识别系统

    2024-05-01 21:24:06       11 阅读
  6. pnpm设置全局存储路径

    2024-05-01 21:24:06       13 阅读
  7. 第三题——LCP 07. 传递信息

    2024-05-01 21:24:06       25 阅读
  8. 抽象类和接口的区别你知道吗

    2024-05-01 21:24:06       14 阅读
  9. web3以太坊开发,前后端交互中涉及到的合约

    2024-05-01 21:24:06       38 阅读