Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。

Event对象属性

1. Event.currentTarget
2. Event.Target
3. Event.type

Event.currentTarget

Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点

xxxxxxxxxx
btn.onclick = function(e){
   console.log(e.currentTarget);
}

Event.target

Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象

xxxxxxxxxx
// HTML代码为
// <p id="para">Hello <em>World</em></p>
function hide(e) {
  console.log(this === e.currentTarget);  // 总是 true
  console.log(this === e.target);  // 有可能不是 true
  e.target.style.visibility = 'hidden';
}

para.addEventListener('click', hide, false);

Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

Event对象方法

1. Event.preventDefault()
2. Event.stopPropagation()

Event.preventDefault

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了

xxxxxxxxxx
btn.onclick = function(e){
    e.preventDefault(); // 阻止默认事件
    console.log("点击A标签");
}

Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

xxxxxxxxxx
btn.onclick = function(e){
    e.stopPropagation(); // 阻止事件冒泡
    console.log("btn");
}

实时效果反馈

1. 下列关于currentTarget和target的代码，输出正确的是：

xxxxxxxxxx
<div id="divBtn">
    <button id="btn">按钮</button>
</div>

xxxxxxxxxx
// 点击按钮输出结果
var divBtn = document.getElementById("divBtn");
divBtn.onclick = function(e){
    console.log(e.currentTarget); 
    console.log(e.target); 
}

A <div id="divBtn"></div> <button id="btn">按钮</button>

B <div id="divBtn"></div> <div id="divBtn"></div>

C <button id="btn">按钮</button> <div id="divBtn"></div>

D <button id="btn">按钮</button> <button id="btn">按钮</button>

2. 下列关于阻止默认事件方法正确的是：

A stopPropagation()

B preventDefault()

C target

D currentTarget

答案

1=>A 2=>B