结构
<div>123</div>
<ul>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
CSS
div {
width: 100px;
height: 100px;
background-color: pink;
}
JS
// 常见事件对象的属性和方法
// 1 e.target 返回的是触发事件的对象(元素) this 返回的是绑定过事件的对象(元素) *
// 区别: 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);
// e.target 指向我们点击的那个对象 谁出发了这歌事件 我们点击的是li e.target 指向的就是li
console.log(e.target);
})
// 了解兼容性
// div.onclick = function (e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
// 2 了解:跟 this 有个非常相似的属性 currentTarget ie678不认识