Javascript 和 HTML 的交互，是通過事件實現的。
事件流的三種模型：
1.事件冒泡。從內 ---> 外
2.事件捕獲。從外 ---> 內
3.DOM2 的事件流。

給元素綁定事件處理程序：

• 1.HTML 內聯方式

    <input type="submit" name="submit" value="click" onclick="dealWith()">

缺點：
1.加載順序問題。如果事件處理程序在 html 代碼之后加載，用戶可能在事件處理程序還未加載完成時，就點擊按鈕觸發事件，存在時間差問題。
2.這樣寫 HTML 和 Javascript 代碼過于緊密耦合，不方便維護。

• 2.通過 Javascript 綁定事件
  HTML 代碼

    <div class="ct">
        <input type="submit" name="submit" value="click" class="btn">
    </div>

Javascript 代碼

    document.getElementsByClassName('btn')[0].onclick = function(){
        console.log(this);
    }

• DOM2 級事件處理程序
• 添加處理事件 addEventListener(type,listener,useCapture)
  type: 表示事件名。如 'click'
  listener: 表示事件發生后執行的程序。如 function(){console.log('被點擊了')}
  useCapture: 指定事件發生在冒泡階段（false.默認）還是捕獲階段（true）
• 刪除處理事件 removeEventListener(type,listener,useCapture)
• onclick 與 addEventListener('click',listener,false) 的區別
• onclick

   document.getElementsByClassName('btn')[0].onclick = function(){
       console.log('a');
   }/*會被覆蓋，相當于函數被重寫了*/
   document.getElementsByClassName('btn')[0].onclick = function(){
       console.log('b');
   }

• addEventListener('click',listener,false)

   document.getElementsByClassName('btn')[0].addEventListener('click',function(){
       console.log('a');
   },true);/*有效，相當于兩個函數合并*/
   document.getElementsByClassName('btn')[0].addEventListener('click',function(){
       console.log('b');
   },true);/*有效，相當于兩個函數合并*/

DOM 事件對象（event 對象）的屬性和方法

• event.target 事件來源

• event.preventDefault() 取消默認事件

• event.stopPropagation() 取消事件進一步捕獲或者冒泡

• 事件代理：把事件綁定在父元素上，通過事件來源(event.target)確定事件的發出者。
  注：通過 JS 添加的元素的事件，無法觸發原來綁定的。需要通過事件代理實現。

    <div class="ct">
        <div class="target">item 1</div>
        <div class="target">item 2</div>
        <div class="target">item 3</div>
    </div>
    <input type="submit" name="submit" value="添加" class="btn">
    <script type="text/javascript">
        var ct = document.getElementsByClassName('ct')[0];
        ct.addEventListener('click',function(e){
            console.log(e.target)
        },false);
    </script>

• jQuery 中的 事件綁定
• on('click',function(){})
• 事件代理 on('click',function(){})

    <ul class="father">
        <li class="child"></li>
    </ul>

    <script>
        $('.father').on('click','.child',function(){});
    </script>