day19 事件对象及其常用属性

事件对象

• 任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
• 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
• 使用场景：
  • 判断用户按下哪个键，比如按下回车是发布；
  • 判断鼠标点击了哪个元素，从而做相应的操作
• 语法：如何获取
  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event、ev、e

1. ev.type 当前事件的类型
2. ev.clientX/Y 光标相对浏览器窗口的位置
3. ev.offsetX/Y 光标相于当前 DOM 元素的位置
4. ev.key用户按下的键的值

注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

 <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keyup', function (e) {
            console.log(e)
            console.log(e.key)
            if (e.key === 'Enter') {
                console.log('enter')
            }
        })
    </script>