DOM 事件

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>