Web APIs——事件对象

一、获取事件对象

1.1 事件对象是什么？

也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景：

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

语法：如何获取

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

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

    <button>点击button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function (e) {
            console.log(e);
        })
    script>

1.2 获取事件对象

部分常用属性

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

    <button>点击button>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keyup',function (e){
            // console.log(11)
            // console.log(e.key)
            if (e.key === 'Enter'){
                console.log('我按下了回车键')
            }
        })
    script>
body>

二、评论回车发布

需求：按下回车键盘，可以发布信息

分析：

1. 用到按下键盘事件keydown或者keyup都可以
2. 如果用户按下的是回车键盘，则发布信息
3. 让留言信息模块显示，把拿到的数据渲染到对应标签内部

DOCTYPE html>
 
  
  
  
  
  
 
  
    
    
    发布