事件对象

顾名思义事件对象也是一个对象，这个对象里有事件触发时的相关信息

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

 <button>点我</button>
    <script>
        const btn = document.querySelector('button')

        btn.addEventListener('click', (event) => {
            console.log(event);//打印出事件对象
        })
    </script>

在上述代码块中event即是事件对象

打印出的结果是个对象，如下

事件对象常用属性

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

案例：

需求:能让盒子跟随盒子移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        //获取DOM元素
        let div = document.querySelector('div')
        let body = document.querySelector('body')
        //鼠标移动事件
        body.addEventListener('mousemove', function(event) {
            //将clientX/clientY值赋值给定位
            div.style.left = event.clientX + 'px'
            div.style.top = event.clientY + 'px'
        })
    </script>
</body>

</html>

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

key

用户按下的键盘键的值

需求:按下回车键盘，可以发布信息分析： ①：用到按下键盘事件 keydown 或者 keyup 都可以 ②：如果用户按下的是回车键盘，则发布信息 ③：按下键盘发布新闻，其实和点击发布按钮效果一致

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 获取dom元素
        const text = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const ul = document.querySelector('ul')

        // 先给btn按钮绑定点击事件
        btn.addEventListener('click', () => {
            let html = ''
                //创建li标签并将text中输入的赋值
            html = ` <li>${text.value}</li>`
                // 将li标签插入到ul中
            ul.innerHTML += html

            // 清除文本框
            text.value = null
        })

        // 给enter键绑定事件
        text.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                //阻止默认行为防止换行
                event.preventDefault()
                    //调用btn按钮事件
                btn.click()
            }
        })
    </script>
</body>

</html>

事件对象及常用属性

事件对象

事件对象常用属性

clientX/clientY

offsetX/offsetY

key