JavaScript 事件
事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。
事件冒泡流：嵌套最深的结点最先接收事件。
事件捕获流：document对象最先接收事件。
var test = function (el){
el.addEventListener('click', function() {
console.log(el.id);
},false);
el.addEventListener('click', function() {
console.log(el.id);
},true);
}
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var ip = document.getElementById('input');
test(one);
test(two);
test(three);
test(ip);
输出：
one
two
three
input
input
three
two
one
HTML事件处理程序
在HTML中，某个元素支持每种事件，都可以使用一个与之相应事件的处理程序同名的HTML特性来指定。
独到之处
首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event也就是事件对象。在这个函数内部，this值等于事件的目标元素。
两个缺点
首先存在一个时差问题，因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时事件的处理程序有可能尚不具备执行条件。为此，很多html事件都会用try{}catch(ex){}来封装。
第二，HTML与JavaScript紧密耦合。
书中提到使用with,来扩展作用域，而《JavaScript精萃》里说
with的本意是减少键盘输入。比如
obj.a = obj.b;
obj.c = obj.d;
可以简写成
with(obj) {
a = b;
c = d;
}
但是，在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。
DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性。以这种方式添加的事件处理程序会在冒泡阶段被处理。
document.getElementById('myButton').onclick = function(){
console.log(this.id);
};
document.getElementById('myButton').onclick = null; //删除事件处理程序注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素。
DOM2级事件处理程序
addEventListener与removeEventListener
使用DOM2级方法的好处在于可以为同一个事件添加多个事件处理程序。
使用addEventListener添加的事件处理程序，只能用removeEventListener删除，且匿名函数无法删除。
IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()与detachEvent()只接受2个参数，IE只提供冒泡流。
与DOM0级方法的主要区别在于事件处理程序的作用域。在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，此时this等于window。
document.getElementById('myButton').attachEvent("onclick",function(){
alert("first");
})
document.getElementById('myButton').attachEvent("onclick",function(){
alert("two")
})同时，IE的事件处理程序不是以添加他们的顺序执行，而是以相反的顺序被触发。
dc
在以上中使用addEventListener与attachEvent,最好不要使用匿名函数，因为去除时，任然需要将函数输入，匿名函数无法成功去除。
《JavaScript精粹》中也有相关建议如下：
在Javascript中定义一个函数，有两种写法：
function foo() { }
和
var foo = function () { }
两种写法完全等价。但是在解析的时候，前一种写法会被解析器自动提升到代码的头部，因此违背了函数应该先定义后使用的要求，所以建议定义函数时，全部采用后一种写法。
内存与性能
在每个对象上绑定事件，即会增加dom的访问次数，而且也会大大增加event对象，造成内存占用。所以想要提高性能，就会用到委托事件。
建立在冒泡机制之上的事件委托技术，可以有效的减少事件处理程序的数量，能够大大的提高性能，减少内存消耗。
在两种情况下，需要注意移除事件处理程序，第一种就是从文档中移除带有事件处理程序的元素时，第二种情况是卸载页面的时候。
利用事件委托实现事件在HTML页面中的可配置
var list = document.getElementById("mylinks");
list.addEventListener("click", function (event) {
switch(event.target.id){
case "github":
location.href="https://github.com/";
case "baidu":
location.href="https://baidu.com/";
case "google":
location.href="https://google.com/";
}
});
事件模拟
事件模拟分为：
- UIEvents
- MouseEvents
- MutationEvents
- HTMLEvents
var btn = document.getElementById("myButton");
var event = document.createEvent("MouseEvents");
event.initEvent('click');
btn.dispatchEvent(event); //模拟在btn上触发event事件