Web APIs 2：事件监听
Web APIs 2（事件监听）
1.事件监听
-
语法：
元素对象.addEventListener(‘事件类型’，要执行的函数)
- 事件源：获取的dom元素
- 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数：要做的事情
//点击x图标关闭广告
<button>
点击
</button>
<div class="box">
<p>我是一个广告</p><i class="bi bi-x-circle"></i></span>
</div>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert("事件监听成功！")
})
const x = document.querySelector('.box i')
const box = document.querySelector('.box')
x.addEventListener('click', function () {
box.style.display = 'none'
})
2.事件类型
- 鼠标事件：click、mouseenter（鼠标经过）、mouseleave（鼠标离开）
- 焦点事件（表单）：focus（获得焦点）、blur（失去焦点）
- 键盘事件：Keydown(键盘按下触发)、Keyup(键盘抬起触发)
- 文本事件：input（用户输入事件）
3.事件对象
-
概念：事件对象中有事件触发时的相关信息
- eg:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
- eg:用户按下哪个键，比如按下回车键发送消息
-
语法：
- 事件监听绑定的回调函数的第一个参数就是事件对象，一般命名为event\ev\e
元素.addEventListener('click',function(e){ }) -
属性：
- type:事件类型
- clientX/clientY:获取光标对于浏览器课件窗口左上角的位置
- offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
- key:用户按下的键盘键的值
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
console.log(e.key)
if (e.key === 'Enter') {
//当需要按下回车键才发送时，就可以采用事件对象，当事件对象的key属性为回车时，触发发送
console.log('我按下了回车键')
}
})
</script>
</body>
4.环境对象this
- 指的是函数内部特殊的变量this，代表当前函数运行时所处的环境
- 判断this指向的粗略规则：【谁调用，this就指向谁】
- 作用：使得代码更简洁
5.回调函数
- 概念：函数A作为参数传递给函数B时，我们称函数A为回调函数
原文地址：https://blog.csdn.net/weixin_72043867/article/details/142412443
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！