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为回调函数