事件概念
就是一种浏览器通知，告诉当前窗口在文档中要进行哪种交互。文档中的很多交互需要有前置条件，只有满足这些前置条件时，才会去触发执行某个动作。而正是事件实现了这种交互。
事件类型
事件类型也就是事件名称，以字符串的形式存在，用于指定要发生哪种事件。常用的事件类型：
表单：focus、blur、sumbit、change等
鼠标：mouseover、mouseup、mousemove、mousedown、click、dbclick等
键盘：keydown、keyup、keypress等
触屏：touchstart、dragenter、dragend等
拖放：dragstart、dragenter、dragend等
文档加载：load、DOMContentLoaded等
窗口：resize、scroll、load、unload等
事件目标
事件目标就是注册了某个事件的对象，如果要执行事件，就必须指定事件类型和事件目标。在JavaScript中，最常用的事件目标就是Window、Document和Element。
事件处理程序
事件处理程序就是用户或浏览器自身执行的某种动作。例如click、load等，都是事件的名称，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此click事件的时间处理程序就是onclick，load事件的时间处理程序就是onload。
为事件指定处理程序的方式或注册事件（绑定事件）的方式：
1）HTML事件处理程序
当在HTML属性中注册事件处理程序时，不能包含函数声明，也就是不能包含大括号和function关键字，只能是函数调用或具体的代码块：
<button type="button" onclick="console.log("onclick")">提交</button>
<!--不能下面的函数声明-->
<button type="button" onclick="function(event){}">提交</button>
这种注册方式实现起来很简单，但是有很大的局限性。首先不能控制注册事件的时机，也就是说某些事件需要满足一些条件后才能注册，而这种方式只要文档渲染好后，执行某个动作（如点击按钮）就能触发对应的事件，其次，HTML和JavaScript代码紧密耦合，冗长的代码串即不利于维护，也不符合结构与行为分离的规则。
2）DOM0级事件处理程序（定义对象属性）
将一个函数（事件处理程序）赋给对象的一个属性，此类属性可称为事件处理程序属性。根据规定，属性的名字要以“on”开头，后面跟随事件类型，并且必须小写，即使是多个单词也要小写，例如onclick、onload等。注意在IE8及以下的版本获取事件对象要调用全局属性event；而其他浏览器中，事件处理程序都会包含一个事件对象的参数。
<button id="btn" type="button">btn</button>
<script>
var myBtn=document.getElementById("btn");
myBtn.onclick=function(event){
var event=event||window.event;
console.log(this);
}
</script>
3）DOM2级事件处理程序
除IE8及以下版本外，所有的浏览器都支持addEventListener()方法。此方法由事件目标调用，能接受三个参数，第一个是事件类型（不包含前缀“on”），第二个参数是事件处理程序，第三个参数是一个布尔值，表示捕获（true）还是冒泡（false）。
var myBtn=document.getElementById("btn"); myBtn.addEventListener("click",function(){ console.log(this); },false);
此方法中的事件处理程序包含一个参数：事件对象（event），并且此时this指向的是正在处理该事件的对象，其值始终与事件对象的currentTarget属性相同。当用这个方法注册同一类型的事件时，事件之间不会出现覆盖，而是会依次执行。
4）IE事件处理程序
IE实现了与DOM中两个类似的方法：attachEvent()和detachEvent(),这两个方法接收相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早的版本只能支持事件冒泡，所以通过attachEvent()添加的事件处理程序就会被添加到冒泡阶段。事件处理程序会在全局作用域中执行，此时的this会指向全局对象。
var myBtn=document.getElementById("btn"); myBtn.attachEvent("onclick",function(){ console.log(this);//window });
此方法同样不能用返回值来取消事件，需要用事件对象的一个属性returnValue。当属性被设置为false时，就能阻止事件的默认操作。如果要移除事件，那么可以用对应的移除detachEvent()。它也接收两个参数，含义也与attachEvent()中的相同，并且两个事件处理程序要相同才能移除成功。
事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，包含鼠标为位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有的浏览器都支持event对象，但支持方式不同。
DOM中的事件对象
event对象包含于创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样，不过，所以事件都会有以下的成员：bubbles、cancelable、currentTarget、defaultPrevented、detail、eventPhase、preventDefault、stopImmediatePropagation()、stopPropagation()、target、trusted、type、view。
事件对象常用的方法
preventDefault：阻止时间的默认操作
stopPropagation()：阻止事件传播
stopImmediatePropagation()不但阻止事件的传播，而且还会阻止触发注册在元素上的当前事件类型的其他事件处理程序。
event.target与event.currentTarget的区别：
event.target返回的是触发事件的元素
event.currentTarget返回的是绑定事件的元素
IE中的事件对象
IE中的事件对象可以通过全局对象的event属性获得，它也有许多与事件信息相关的属性和方法，有一些属性可与DOM中的事件对象的属性或方法对应
cancelBubble:是否阻止事件冒泡，当设为true时，相当于调用stopPropagation()方法
returnValue:是否可以阻止事件的默认操作，当设为false时，相当于调用preventDefault()方法
srcElement：事件对象，相当于target属性
取消事件
有些事件存在与之相关的默认操作，例如超链接的重定向。事件处理程序可以通过返回一个适当的值（例如false）或者调用事件对象的某个方法（例如preventDefault()）来阻止默认操作的发生，这个操作也叫取消事件。