事件对象(event)

<div>111</div>var div = document.querySelector('div');div.onclick = function(event) {};

1.event 就是一个事件对象，写到侦听函数的小括号里，当作形参来看。

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

3.事件对象是我们事件的一系列跟事件相关的数据的集合。比如鼠标点击事件里面就包含了鼠标的相关信息，如鼠标的坐标，如果是键盘事件里面就包含的是键盘事件的信息，如判断用户按下哪个按键。

div.addEventListener('click',function(event){console.log(event);})

4.这个事件对象可以自己命名，比如event，evt，e

5.事件对象也有兼容性问题ie6,7,8 通过window.event

兼容性的写法：e || window.event;

可以简单理解为：事件发生后，跟事件相关的一系列信息，数据的集合都放在这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。

事件对象的常见属性和方法:

<div>12</div><ul><li>ab</li><li>ab</li><li>ab</li></ul>// 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就指向ulconsole.log(e.target);})

区别：e.target 点击哪个元素就返回哪个元素，this是哪个元素绑定了这个点击事件就返回哪个。

<div>11</div><a href="">百度</a><form action=""><input type="submit" value="提交" name="sub"></form>// 返回事件类型var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);function fn(e) {console.log(e.type);}// 阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交var a = document.querySelector('a');a.addEventListener('click', function(e){e.preventDefault(); // BOM 标准写法})