html画面元素就好像很多图层一层一层叠加起来的。
比如在一个<p>元素图层上（内），再放置一个<button>图层。
在响应事件是会使用冒泡的方式，比如响应button的点击事件时，它下面的图层（<p>元素图层也会触发点击事件）。
这时最初触发事件的对象就是e.target,两次都是按钮对象。
当前触发事件的绑定对象就是e.currentTarget,先按钮对象后p对象
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p onclick="pClickHandle(event)">
<input type="button" onclick="btnClickHandle(event)" value="点击">
</p>
</body>
<script>
function btnClickHandle(e){
console.group('按钮被点击');
console.log(e.target);
console.log(e.currentTarget);
console.groupEnd();
}
function pClickHandle(e){
console.group('P被点击');
console.log(e.target);
console.log(e.currentTarget);
console.groupEnd();
}
</script>
</html>
测试结果
▼按钮被点击
▶<input type="button" onclick="btnClickHandle(event)" value="点击">
▶<input type="button" onclick="btnClickHandle(event)" value="点击">
▼P被点击
▶<input type="button" onclick="btnClickHandle(event)" value="点击">
▶ <p onclick="pClickHandle(event)">
网友评论