<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对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。
事件对象的常见属性和方法:
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6—8使用 |
| e.type | 返回事件类型 比如click，mouseover 不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准 ie6—8使用 |
| e.returnValue | 该属性阻止默认事件(默认行为) 非标准 ie6—8使用 比如不让链接跳转 |
| e.preventDefault | 该方法阻止默认事件(默认行为) 标准 比如不让链接跳转 |
| e.stopropagation | 阻止冒泡 标准 |
<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就指向ul console.log(e.target); })
区别：e.target 点击哪个元素就返回哪个元素，this是哪个元素绑定了这个点击事件就返回哪个。
<div>11</div> <a href="www.baidu.com">百度</a> <form action="www.baidu.com"> <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 标准写法 })
