event就是一个事件对象 写在侦听函数(鼠标点击 经过.function)的小括号里面 当形参来看 也可简写为e
事件对象是系统自动创建的 不用传递参数 是事件一系列相关数据的集合 跟事件相关的 如鼠标点击 则包含了鼠标的相关信息 如果是键盘事件 则包含了键盘的相关信息 判断用户按下了哪个键等
<body>
<div class="father">
father
<div class="son">son</div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click', function(event) {
console.log(event);
// console.log(window.event) ie678兼容性问题不可简写 使用window.event
})
</script>
</body>
event常见的属性和方法
1.e.target
target 是点击了哪个元素 就返回哪个元素
this 返回的是哪个元素绑定了点击事件 则返回哪个元素 近代表当前元素
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.onclick = function(e) {
console.log(e.target);
console.log(this);
}
</script>
</body>
2.阻止默认行为（事件） 让链接不跳转 或者让按钮不提交
3.阻止事件冒泡（掌握！
在侦听函数里加上这句话 e.stopPropagation(); 即可阻止事件冒泡
stop 停止 Propagation 传播
使用场景：比如父盒子里包含了一个子盒子 给了子盒子和父盒子分别设置点击事件弹出对话框 点了子盒子 结果父盒子的对话框也出来了 想只弹出子盒子 就在子盒子里 添加该属性 阻止冒泡
