dom-day03

2018.9.5 星期三

事件

就是文档或浏览器窗口中发生的一些特定的交互瞬间：
点击、移进、移出、聚焦、失焦、键盘按下（回车）、键盘抬起…

如果在登录页面某一个input内按下了enter键，是需要登录的话。
js代码:
input.onkeydown = function(){
//判断按下是不是回车键，如果是回车跳转到首页
}

事件三要素
事件目标(event target) btn(节点)
事件处理程序(event handler) function
事件对象(event object) event
每一个事件处理函数都有一个参数，是事件对象，只读的
btn.onclick = function(event){
//type 事件类型
}
btn.onmouseenter = function(event){
//event.type
}

事件流

 **1.事件冒泡（IE事件流）**
    从内到外执行，顺序为：div-body-document
     div.onclick = test1;
     body.onclick = test2;
     document.onclick = test3;
    点击div的时候，执行顺序是：test1 test2 test3
    点击body的时候，执行顺序是：test2 test3

 **2.事件捕获（Netscape网景事件流）**
    从外到内执行，顺序为：div-body-document
     div.onclick = test1;
     body.onclick = test2;
     document.onclick = test3;
    点击div的时候，执行顺序是：test3 test2 test1
    点击body的时候，执行顺序是：test3 test2

 **3.DOM事件流**
    事件捕获--处理目标--事件冒泡


**event事件对象的方法：**
  IE8及以下不支持
  停止冒泡：
      event.stopPropagation();
  阻止默认行为： 
      event.preventDefault();  


 **事件处理程序**
    HTML事件处理程序
    DOM0级事件处理程序

绑定事件的方式

    **1.HTML属性绑定**
        缺点：依赖性比较强，耦合度高。
        <button onclick = "test()">按钮</button>

    **2.DOM0级绑定**
        不存在兼容性问题，在IE8及以下可以使用，非IE8及以下也可以使用。

        btn.onclick = function(event){
             alert(1);
        /* event  //在非IE8及以下中，event参数就是事件对象
           window.event   //IE8及以下中

           event.stopPropagation(); // 阻止冒泡

           event.preventDefault();  // 阻止默认行为 */   
        }


      btn.onclick = null; //解绑

      如果有同一个事件类型绑定两次事件函数，会发生覆盖  

    **3.DOM2级绑定** 
       区分浏览器

       非IE8及以下:
                 ele.addEventListener('click',handle,true/false);

                 function handle(event){
                      //event--->事件对象
                        //this-->element
                 }

        true是捕获阶段执行
        false是冒泡阶段执行（默认）       

        //解绑
          ele.removeElementListener('click',handle);     


           ele.addEventListener('click',handle);
           ele.addEventListener('click',handle1);
                //不会发生覆盖，依次执行

        IE8及以下:
                 ele.attachEvent('onclick',handle);
                 function handle(event){
                      //event--->事件对象
                      //this-->window
                 }   

            //解绑
            ele.detachEvent('onclick',handle);

                ele.attachEvent('click',handle);
                ele.attachEvent('click',handle1);
                //反向执行




    DOM0级
           在非IE8及以下：event
           在IE8及以下: window.event
    DOM2级
         event
         event?event:window.event       

---

总结：
DOM0级

DOM2级
非IE8及以下：
//不会发生覆盖，依次执行
ele.addEventListener(‘click’,handle);
ele.addEventListener(‘click’,handle1);
//解绑
ele.removeElementListener(‘click’,handle);

IE8及以下：
//按相反顺序执行
ele.attachEvent(‘click’,handle);
ele.attachEvent(‘click’,handle1);
//解绑
ele.detachEvent(‘onclick’,handle);
如果事件处理函数是匿名函数，无法解绑。

  ele.addEventListener('click',function(){
    alert(1);
  });

阻止冒泡：
非IE8及以下：
event.stopPropagation();
IE8及以下：
event.cancelBubble = true;
阻止默认：
非IE8及以下：
event.preventDefault();
IE8及以下：
event.returnValue = false;

获取目标对象：
非IE8及以下：
event.target 获取源头元素
event.currentTarget 获取当前的目标对象
this == event.currentTarget
IE8及以下：
event.srcElement 获取源头元素
this–>window

鼠标事件

   mouseenter  鼠标移入  不支持子元素
   mouseleave  鼠标移出  不支持子元素

   mouseover   鼠标移入  支持子元素
   mouserout   鼠标移出  支持子元素

   keydowmn  键盘按下
      function(event){
           event.keyCode == 键盘码;
           //13 回车
      }
   keyup     键盘抬起