事件对象：event
1.常用事件：onclick（点击） onmouseenter(鼠标进入) onmouseover(鼠标悬浮) onmouseleave(鼠标离开) onfocus(表单聚焦) onblur(表单失去焦点) onmouseout(鼠标移出) onmousemove(鼠标移动) onmousedown(鼠标按下) onmouseup(鼠标抬起) onchange(表单内容修改) 浏览器加载完成（onload） 计数器（count）
2.每个元素身上的事件都是天生存在的，不需要我们去定义，只需要我给这个事件绑定一个方法，当事件触发的时候，就会执行这个方法
3.事件绑定的写法：
1.div.onclick=function(){} dom0级事件
2.div.addEventListener或者div.attachEvent dom2级事件
写法上二者的区别
1.onclick这个元素的属性是私有的 而 addEventListener()是公有的属性 从EventTarget(事件源)继承来的 ie低版本attachevent也是公有的
2.div.onclick存在事件冒泡机制，没有捕获
div.addEventListener可有冒泡，可有捕获；
div.attachEvent 只有冒泡，没有捕获；
4.div.addEventListener和div.attachEvent的区别？
1.前者有冒泡和捕获机制，后者只有冒泡机制；
2.事件名前者不带on，后者带on
3.前者this指向当前元素，后者指向window
4.前者是标准浏览器，后者ie8以下
案例：
var div=document.getElementById("div")
div.onclick=function(){
console.log(arguments)
}
上面控制台arguments数组有一个元素叫mouseevent
arguments(参数):
每个函数都有一个arguments对象，他是这个函数，所有参数构成的集合
所以每个事件的方法中浏览器都给它一个参数叫mouse event，我们所有的鼠标信息在这个mouse event上
1.event兼容性：声明不一样
标准浏览器声明为undefined IE声明为null 火狐无法识别（会报错）
解决办法：
div.onclick=function(ev){
var ev=ev||window.event
}
clientX和clientY的兼容性是鼠标离浏览器窗口左上角的坐标距离
pageX和pageY他是鼠标到网页（文档）左上角的距离坐标，但是IE低版本没有这个属性，在IE下怎么算pageY的值，用clientY+scrollTop
2.事件源，点击哪个元素，哪个元素就是事件源
事件源的兼容：
标准浏览器的事件源是ev.target ie低版本（5-8）不识别这个属性，但是ie有ev.srcElement这个属性和target差不多
3.阻止事件冒泡的兼容性（之前的版本有，现在没有了，仅供了解）
第一种：ie低版本的写法为event.cancelBubble=true; 标准浏览器的写法为：event.stoppropagation（现在标准浏览器也支持了event.cancel Bubble的写法）
他的兼容性写法为：event.stoppropargation?event.stopropagation:event.cancelBubble;
阻止事件默认行为的兼容性：
4.阻止事件默认行为的兼容性：
比如 a的href
href为空，会自动刷新页面
href为#， 锚点跳转
href为JavaScript：； 阻止默认行为的发生
（以上是a标签阻止浏览器的默认行为，但也有别的事件会有默认行为）
标准浏览器：
event.preventDefault()
ie低版本的写法：
event.retrunValue
兼容性的写法为event.preventDefault()?event.preventDefaulf():event.returnValue;
事件委托：
委托就是利用事件冒泡（所有的dom操作离不开事件）
如果子元素身上绑定大量相同的事件，我们尽量采用事件委托，所有子元素把自己的子元素委托给父级
传统的for循环绑定事件会增加大量的dom操作（事件）影响页面性能，采用事件委托就把所有事件基于一个元素上
事件委托的原理：采用事件冒泡机制完成的
2.事件委托和传统事件绑定的优势？
传统事件对新增元素不起作用，事件委托起作用
传统事件绑定，有多少元素，js就绑定多少事件，事件委托，只需要一个事件
并不是所有事件都存在事件冒泡：
onmouseenter(鼠标进入) onmouseleave(鼠标离开)就没有事件冒泡
所以我们做跟随鼠标的时候，尽量用者两个事件