事件js

1，事件流：从页面中接受事件的顺序

• IE：事件冒泡（即事件由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传递至最不具体的那个节点（文档）---由内而外 ）
• N：事件捕获流（不太具体的那个节点先接受到事件，而最具体的节点最后收到---由外而内）

PS:（两个完全相反的概念）

---

    
事件流
    

        
        
        
        preventDefault()
    

2，事件处理程序

（1）html事件处理程序：写在标签里
onclick='alert(123)' onclick = 'showClick()'
（2）DOM 0级处理程序 （优势：跨浏览器，可以一个元素绑定多个程序）

//绑定
      var btn1 = document.getElementById('btn1');
      btn1.onclick=function(){
            alert(1)
        }
//删除
  btn1.onclick=null;

（3）DOM 2级事件处理程序 （优势：可以绑定多个）--- IE不生效
PS：定义了两个方法：用于处理指定和删除事件处理程序的操作
addEventListener() , removeEventListener()
接收三个参数：要处理的事件名，作为事件处理程序的函数，布尔值（true：捕获阶段；false：冒泡阶段）

       function showAlert(){
            alert('btn3')
        }
        var btn3 = document.getElementById('btn3');
      //绑定
        btn3.addEventListener('click',showAlert,false);
        btn3.addEventListener('click',function(){
            alert('hello')
        },false)

      //移除
     btn3.removeEventListener('click',showAlert,false);

！！！注意：事件名称不加on; 移除时参数必须相同。

（4）IE事件处理程序
attachEvent()添加， detachEvent()移除
接受两个相同的参数：事件处理程序的名称，事件处理程序的函数

        var btn2 = document.getElementById('btn2');
        btn2.attachEvent('onclick',showAlert);
        btn2.detachEvent('onclick',showAlert);

---

将2中的方法封装到一个对象中（解决跨浏览器问题）

   var eventUntil = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){ //支持DOM 2级
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){//支持IE
                element.attachEvent('on'+type,handler)
            }else{//DOM 0级
                element['on'+type]=handler
            }
        },
        //删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler)
            }else{
                element['on'+type] = null
            }
        },
       getEvent:function(event){
            return event?event:window.event
        },
        getType:function(event){
            return event.type;
        },
        getElement:function(event){
            return event.target || event.srcElement;
        },
        //阻止默认事件
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault()
            }else if(event.returnValue){
                event.returnValue = false;
            }
        },
        //阻止冒泡
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else if(event.cancleBubble){
                event.cancleBubble = true;
            }
        }
    }
    //使用
    eventUntil.addHandler(btn3,'click',showAlert);
    eventUntil.removeHandler(btn3,'click',showAlert);

    var go = document.getElementById('go');
    eventUntil.addHandler(go,'click',function(e){
        e = e || window.event;
        // e = eventUntil.getEvent(e);
        console.log(eventUntil.getElement(e).nodeName)
        eventUntil.preventDefault(e)
        eventUntil.stopPropagation(e)
    })

---

3，事件对象event ： 在触发DOM上的事件时都会产生一个对象

event = event || window.event;

（1）DOM中的事件对象
参数：event\e

 function eventFun(event){
    alert(event.type)
}

常用的属性：

• type属性：用于获取事件类型
• target属性： 用于获取事件目标（eg：target.nodeName）
• stopPropagation()方法：阻止事件冒泡
• preventDefault()方法： 阻止事件的默认行为

（2）IE中的事件对象
常用属性：

• type：事件类型
• srcElement属性：获取事件目标
• cancelBubble属性：用于阻止事件冒泡（true：阻止冒泡；false：不阻止）
• returnValue属性： 阻止事件的默认行为（false）

---

4，不同的事件类型

（1）鼠标事件
onmousedown
onmousemove
onmouseup