DOM 事件

事件模型

    事件冒泡：事件源从里边元素逐级传到外层元素（一般使用事件冒泡）

    事件捕获：从根元素传到目标元素

    addEventListener("click",functionName,false);     // false 冒泡执行，true捕获执行

事件处理程序

     传统方式
     <button id="btn" onclick="alert(123)">点我</button>
     // 这种方式脚本和html结构耦合度太高，不建议使用

     DOM0级事件处理程序
     <button id="btn" onclick="show()">点我</button>
    <script>
         function show(){
              alert(123);
         }

         var btn = document.getElementById("btn");

         // 添加事件
         btn.onclick = function(e){
                   alert(“这里是dom0级事件处理”)
              }

         // 清除事件
         btn.onclick= null;

    </script>

DOM2级事件处理程序 （没有1级，直接跨过）

     指定了两个方法用于添加/删除事件处理程序。接受三个参数
     addEventListener(“eventType”,function(){},false)
     removeEventListener()
     3参数 :事件名（如click）、处理函数、bool值（指定事件执行阶段,默认false 冒泡阶段）

     <button id="btn" onclick="show()">点我</button>
    <script>
         function show(){
              alert(123);
         }

         var btn2 = document.getElementById("btn");
         btn.onclick = function(e){
                   alert(“这里是dom0级事件处理”)
              }

         btn.onclick= null;

btn2.addEventListener("click",show,false);

         // 删除指定事件，传入的参数和添加的时候保持一致
         btn2.removeEventListener("click",show,false)

    </script>

IE 事件处理及跨浏览器兼容

     ie中的事件都是在冒泡阶段执行的

     ie中的事件处理程序（和addEventListener一样，没有第三个参数）

          attachEvent() // 添加事件

          detachEvent() // 删除事件


     兼容处理

         var eventUtil = function(el,type,handle){
              if(el.addEventListener){
                    el.addEventListener(type,handle,false)
               }else if(el.attachEvent){
                    el.attachEvent(type,handle);
               }else{
                   // el.onclick = handle;
                    el["on"+type] = handle;
               }
          }

事件对象 event

     btn.onclick = function(event){

         // event.clientX;     // 鼠标在视窗中X轴的位置
        // event.clientY;

           event.type   // 事件类型如 click

           event.keyCode   // 按下的键值

            event.target     // 获取事件的目标

             // 组织事件冒泡
             event.stopPropagation();

             event.preventDefault();
      }

     在IE中 var event= event || window.event

          event.type 表示事件类型

          event.srcElement 表示事件目标

          event.canelBubble = false 用于阻止事件冒泡（true 阻止冒泡）

          event.returnValue = false;    // 阻止默认行为

常用事件

    keyDown : 对任意键，按下时执行，按着不放会重复执行

    keyPress : 对字符键，按下时执行，按着不放会重复执行

    keyUp:对任意键，松开按键执行，执行一次