基础回顾-浏览器事件机制
- 1 min最近在复习一些基础的知识。 尤其是当时看的时候就不是很明白的东西，现在再看一遍，有一种豁然开朗的感觉。
浏览器中的事件，大部分的问题都会集中在IE和其他系浏览器之前的差异。
####两种事件机制 要想理解这种差异，就要了解Bubbling和Capturing这两种事件机制。
所谓Bubbling，就是俗称的冒泡机制；所谓的Capturing，就是俗称的捕获机制。
下面以一个简单的结构作为说明：
<body>
<div id="box">
<button id="button">click</button>
</div>
</body>
在这个结构中，点击button。
在Bubbling机制下，事件是从button逐级向外层元素传播，形象的比喻为冒泡。假设我给button和box都绑定了事件回调，那么事件回调执行的顺序是buttonHandler,boxHandler。
在Capturing机制下，事件是从document一直向被选中的元素传递，直到传到被选中的元素为止。还是假设给button和box都绑定了事件回调，那么事件回调的执行顺序是boxHandler,buttonHandler。
通俗的说，就是一个(Bubbling)是由内向外，另一个(Camturing)是由外向内。
####浏览器差异
在非IE浏览器中，事件都是通过addEventlistener(eventName,callback,isCapturing)这种方式来绑定的。最后一个isCapturing参数，是用来选择是否使用Capturing机制来处理事件。通常来说，这个参数都会使用默认的false，也就是不使用Capturing的方式来处理事件。
但是在IE浏览器中，事件都是通过attachEvent(eventName,callback)的方式来绑定的，可以看到在这个方法中，没有给使用者留参数，选择是使用Bubbleing和Capturing。所以呢，IE浏览器在这里就给大家留了个坑 ： 在IE浏览器中，事件处理都是使用Bubbling机制来处理的。
除此之外，在整个事件处理的流程中，非IE浏览器的callback里,this会指向当前触发事件的元素；但是在IE浏览器中，this会指向window.event这个全局的变量中。
所以，如果要想在IE浏览器中获取到当前触发事件的元素，还需要到window.event中去取值。
另外，在非IE浏览器中，如果想要取消事件的默认方法，可以通过evn.preventDefault()来完成；但是在IE浏览器中，只能通过window.event.returnValue = false来完成。