事件（一）读书笔记系列

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

　　1、事件流

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

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

　　3.DOM事件流

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

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

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

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

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

接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦咱们获得了目标元素以后，剩下的事情就是看看它是不是咱们所须要的那个元素了。

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

那么优势显而易见，咱们的事件处理器减小了，性能获得了提高；在DOM元素更新后或动态生成后不须要再从新绑定事件。

　　那么缺点是什么呢？

　　不是全部的事件都是能够冒泡的：如blur、focus、load和unload；

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

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

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

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

　　　　event.stopPropagation();

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

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