addEventListener
使用addEventListner()方法可以为事件目标注册事件处理程序。addEventListner()接受三个参数。第一个是要注册处理程序的事件类型，这个事件类型（或名字）是字符串，但它不包括应该用于设置事件处理程序属性的前缀”on“。第二个参数是当指定类型的事件发生时应该调用的函数。最后一个参数时布尔值。通常情况下，会给这个参数传递false。如果相反传递了true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。你可以忽略第三个参数并无须传递false，同时规范最终应该会改变从而允许这么做。但在下面例子忽略这个参数可能在某些浏览器中报错。
<button id = "btn">click me</button>
var b = document.getElementById("btn");
b.onclick = function() {
alert("Thanks for clicking me!");
}
b.addEventListener("click", function() {
alert("Thanks again!");
}, false);
上述中用"click"作为第一个参数调用addEventListener()不会影响onclick属性的值。在前面的代码中，单击按钮会产生两个alert()对话框。
（1）通过多次调用addEventListener()为同一个对象注册同一事件类型的多个处理程序函数。当对象发生事件时，所有该事件类型的注册处理程序都会按照注册的顺序调用。
（2）使用相同的参数在同一个对象上多次调用addEventListener()是没用的，处理程序仍然只注册一次，同时重复调用也不会改变调用处理程序的顺序。
attachEvent
IE9之前的IE不支持addEventListener()和removeEventListener()。IE5及以后版本定义了类似的方法attachEvent()和detachEvent()。
attachEvent()和detachEvent()方法的工作 原理与addEventListender()和removeEventListener()类似，但有一下例外：
- 因为IE事件模型不支持事件捕获，所以attachEvent()和detachEvent()要求只有两个参数：事件类型和处理程序函数。
- IE方法的第一个参数使用了带”on“前缀的事件处理程序属性名，而非没有前缀的事件类型。例如，当给addEventListener()传递"click"时，要给attachEvent()传递”onclick“。
- attachEvent()允许相同的事件处理程序函数注册多次。当特定的事件类型发生时，注册函数的调用次数和注册次数一样。
经常可以看到的事件处理程序注册代码是在支持addEventListener()的浏览器中就调用它，否则就用attachEvent()：
var b = document.getElementById("mybutton");
var handler = function() { alert("Thanks!"); };
if (b.addEventListener)
b.addEventListener("click", hanlder, false);
else if (b.attachEvent)
b.attachEvent("onclick",handler)
事件处理程序的参数
在IE8以前的版本中，通过设置属性注册事件处理程序，当调用它们时并未传递传递事件对象。取而代之，需要通过全局对象 window.event 来获得事件对象。出于互通性，你可编写如下程序，这样如果没有参数就使用window.event:
function handler(event) {
event = event || window.event;
}
向使用attachEvent()注册事件处理程序传递事件对象，但它们也能使用window.event。
事件取消
在支持addEventListener()的浏览器中，也通过调用事件对象的 preventDefault() 方法来取消事件的默认操作。不过，在IE9之前的IE中，可以通过设置事件对象的 returnValue 属性为false来达到同样的效果。
window.onload = function() {
var a = document.getElementById("a");
a.onclick = function(event){
event.preventDefault();
}
}
<a id="a" href="http:www.cnblogs.com">clcik me</a>
/*在IE9以下是不好使的！显示错误：无法获取未定义或 null 引用的属性“preventDefault”*/
接下来进行修改如下：
window.onload = function() {
var a = document.getElementById("a");
a.onclick = function(event){
var event = event || window.event;
event.preventDefault();
}
}
<a id="a" href="http:www.cnblogs.com">clcik me</a>
/*但是在IE8以下还是不支持，必须用event.returnValue = false*/
下面的代码给出三种事件取消技术
function cancelHandler(event) {
var event = event || window.event;
/*这里是处理事件的代码*/
if (event.preventDefault) event.preventDefault(); //标准技术
if (event.returnValue) event.returnValue = false; //IE
return false; //用于处理使用对象属性注册的处理程序
}
事件传播（事件冒泡）
概念
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
（1）event.stopPropagation()
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
【注】IE9之前IE不支持stopPropagation()方法。相反，IE事件对象有一个 cancelBubble 属性，设置这个属性为 true 能阻止事件进一步传播。
（2）return false
事件处理过程中，阻止了事件冒泡，也阻止了默认行为
（3）event.preventDefault()
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
（4）stopImmediatePropagation()
此方法阻止了任何其他对象的事件传播，但也阻止了在相同对象上注册的任何其他事件处理程序的调用。【注】该方法只在IE 11+上支持，如果要求对IE兼容性支持的话，此方法不建议使用
鼠标事件
1 click 2 3 contextmenu 4 /*可以取消的事件，当上下文菜单即将出现时触发。当前浏览器在鼠标右键时显示上下文菜单，所以这个事件也能像click事件使用*/ 5 6 ondblclick 7 /*当用户双击鼠标时触发*/ 8 9 mousedown 10 /*当用户按下鼠标按键时触发*/ 11 12 mouseup 13 /*当用户释放鼠标按键时触发*/ 14 15 mousemove 16 /*当用户移动鼠标时触发*/ 17 18 mouseover 19 /*当鼠标进入元素时触发*/ 20 21 mouseout 22 /*当鼠标离开元素时触发*/ 23 24 mouseenter 25 /*类似”mouseover，但不冒泡。IE将其引入，HTML5将其标准化，但未广泛实现“*/ 26 27 mouseleave 28 /*类似”mouseout，但不冒泡。IE将其引入，HTML5将其标准化，但尚未广泛实现“*/
文本事件
浏览器有三个传统的键盘输入事件。onkeydown事件、onkeyup事件和onkeypress事件。这三者中keypress是比较高级的事件，它表示产生了一个可打印字符。并且通过keypress事件传递的对象更加混乱。一个onkeypress事件表示输入的单个字符。事件对象以数组Unicode编码的形式指定字符，所以必须用String.fromCharCode()把它转换成字符串。