事件（一）讀書筆記系列

　　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;