Dom 事件基础

最新推荐文章于 2024-07-19 15:13:24 发布

程序员校花

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量48

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/IPAD2030/article/details/131155162

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件监听

语法：

元素对象.addEventListener('事件类型', 要执行的函数)

事件监听三要素：

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

示例代码如下：

<body>
<button>点击</button>
<script>
  // 点击按钮弹出对话框
  const btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    alert('校花好美')
  })
</script>
</body>

事件类型

鼠标事件

click ：鼠标点击
mouseenter：鼠标经过
mouseleave ：鼠标离开

焦点事件

表单获得光标：

focus：获得焦点
blur：失去焦点

键盘事件

Keydown：键盘按下触发
Keyup：键盘抬起触发

文本事件

input：用户输入事件

事件对象

事件对象：这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景：

可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为 event、ev、e

语法：

元素.addEventListener('click', function(e) {
    
})

常用属性

type：获取当前的事件类型
clientX / clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY：获取光标相对于当前 DOM 元素左上角的位置
key：用户按下的键盘键的值

this

判断 this 指向的粗略规则：谁调用， this 就是谁
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见