事件（一）读书笔记系列

　　JavaScript和HTML之间的交互就是通过事件来实现的，那么事件是什么呢？事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

　　一、事件流

　　1.事件冒泡 ：由内向外；

　　2.事件捕获：由外向内；

　　3.DOM事件流

　　“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

　　这里插一点题外话，我以前一直很好奇为什么要事件冒泡，存在即合理，那么它到底是要处理什么问题呢？

　　举个栗子~~（事件委托）

　　　　现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：

function getEventTarget(e) {
   e = e || window.event;
   return e.target || e.srcElement;
}

接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。

function editCell(e) {
   var target = getEventTarget(e);
   if(target.tagName.toLowerCase() === 'td') {
     // DO SOMETHING WITH THE CELL
   }
}

那么优点显而易见，我们的事件处理器减少了，性能得到了提升；在DOM元素更新后或动态生成后不需要再重新绑定事件。

　　那么缺点是什么呢？

　　不是所有的事件都是可以冒泡的：如blur、focus、load和unload；

　　有的需求需要我们阻止冒泡，如我们点击弹出层以外的空白处，需要隐蔽弹出层等；

　　那么怎么阻止呢？继续往下走~~　

window.event.cancelBubble = true (IE)  
event.stopPropagation()  event.preventDefault() (Firefox)

　　但是用过js未必常用这个，而是jquery框架，那么jquery的方法是什么叻，往下瞅：

　　　　event.stopPropagation();

　　其实这个方法有时候会有bug~发现阻止不了，那是为啥子呢，以前我也不知道，今天晚上突然我查到了，哈哈，看来看看书还是有用的~

　　那是因为动态绑定的这个方法就不行了，要怎么做呢，简单粗暴：return false;