标签: 事件对象

  • 事件对象

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

    获取事件对象

    btn.addEventListener('click',funtcion(e){
      console.log(e)
    })
    

    常用属性

    type

    获取当前的事件类型

    clientX / clientY

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

    offsetX / offsetY

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

    pageX / pageY

    获取光标相对于文档距离左上角的位置

    key

    用户按下的键盘键的值

    target

    触发事件的对象(可用于事件委托)

    Event.target | MDN

    // Make a list
    var ul = document.createElement('ul');
    document.body.appendChild(ul);
    
    var li1 = document.createElement('li');
    var li2 = document.createElement('li');
    ul.appendChild(li1);
    ul.appendChild(li2);
    
    function hide(e){
      // e.target 引用着 <li> 元素
      // 不像 e.currentTarget 引用着其父级的 <ul> 元素.
      e.target.style.visibility = 'hidden';
    }
    
    // 添加监听事件到列表,当每个 <li> 被点击的时候都会触发。
    ul.addEventListener('click', hide, false);
    

    Event | MDN