事件对象

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注