要想Javascript对用户的操作做出响应，首先要对DOM元素绑定事件处理函数。所谓处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
-
事件绑定
在Javascript中，有三种常用的绑定事件的方法：
- 在DOM元素中直接绑定；
<div onclick="handleCLick()"></div>- 在JavaScript代码中通过dom元素的属性绑定；
<div id="btn"></div> <script> var thisBtn = document.getElementById('btn') thisBtn.onclick = function() { console.log('this is div#btn click') } </script>- 绑定事件监听函数
<div id="btn"></div> <script> var dom = document.getElementById("btn") function handleBtn(){ console.log('this is div#btn') } <!-- IE下使用attachEvent/detachEvent函数进行事件绑定和取消。不是W3C标准的做法，所以不推荐使用 --> /* 1.事件处理函数中this代表的是window对象，不是dom对象。 2.同一个事件处理函数只能绑定一次。 */ <!-- bind --> dom.attachEvent('onclick', handleBtn) <!-- unbind --> dom.detachEvent('onclick', handleBtn) <!-- 使用W3C标准的addEventListener和removeEventListener。不支持IE6/7/8 --> <!-- bind --> dom.addEventListener('click', handleBtn) <!-- unbind --> dom.removeEventListener('click', handleBtn) </script> -
事件冒泡与捕获
事件冒泡和捕获是DOM中事件传播的两种方式，比如说对于注册了相同事件的两个DOM元素，当点击里层DOM元素时候，这两个事件谁先执行。
冒泡事件： 由里向外，最里层的元素先执行，然后冒泡到外层。
捕获事件： 由外向里，最外层的元素先执行，然后传递到内部。
在 IE 9 之前是只支持事件冒泡，IE 9(包括 IE 9) 之后和目前主流的浏览器都同时支持两种事件。只需修改 addEventListener的第三个参数，true 为捕获，false 为冒泡，默认为冒泡。
-
addEventListener
网景 和 微软 曾经的战争还是比较火热的，当时，网景主张捕获方式，微软主张冒泡方式。后来 w3c采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。
addEventListener有三个参数(第三个参数就是为冒泡和捕获准备的)：
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件
第二个参数是触发事件后要执行的函数
第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
-
进一步了解冒泡和捕获
浏览器处理时间分为两个阶段，捕获阶段和冒泡阶段：
先执行捕获阶段，如果事件是在捕获阶段执行的(true 情况)，则执行；
然后是冒泡阶段，如果事件是在冒泡阶段执行的(false 情况)，则执行；
<div id="out"> <div id="inner"> <div id="center">center</div> </div> </div> <script> var center = document.getElementById('center'); var inner = document.getElementById('inner'); var out = document.getElementById('out'); // center center.addEventListener('click', function () { console.log('center true') }, true) center.addEventListener('click', function () { console.log('center false') }, false) // inner inner.addEventListener('click', function (event) { // event.stopPropagation() console.log('inner true') }, true) inner.addEventListener('click', function () { console.log('inner false') }, false) // out out.addEventListener('click', function () { console.log('out true') }, true) out.addEventListener('click', function () { console.log('out false') }, false) </script>点击中心center，则输出
// out true // inner true // center true // center false // inner false // out false此时，根据浏览器事件机制先捕获后冒泡。发生center的捕获顺序是
document->html->body->out->inner->center就捕获到了center，然后冒泡，冒泡顺序反之。在假设点击inner，则输出
// out true // inner true // inner false // out false假设上面代码中的
event.stopPropagation()生效执行，点击center时，事件在inner上捕获时停止了事件传播，但是不能阻止该节点上的捕获事件被调用，则输出的是// out true // inner trueevent.stopPropagation() 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一Document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
总结：
- 对于非target节点则先执行捕获在执行冒泡；
- 对于target节点，捕获与冒泡事件的执行顺序取决于注册顺序；
- 使用event.stopPropagation()将停止事件的传播。
