<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
123
</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script type="text/javascript">
//常见事件对象的属性和方法
//1. e.target 返回的是触发事件的对象(元素)
//区别： e.target点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
//我们给ul绑定了事件 那么this 就指向ul
console.log(this);
console.log(e.currentTarget);
//e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
console.log(e.target);
})
//处理兼容性的问题 currentTarget
// div.onclick = function(e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
//2.this有个非常相似的属性 currentTarget
</script>
</body>
</html>
e.target 返回的是触发事件的对象(元素)
我们给ul绑定了事件 那么this 就指向ul
e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
区别： e.target点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
