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:对任意键，松开按键执行，执行一次