javaScriptDOM事件学习

什么是事件

事件流——描述的是从页面中接受事件的顺序。
事件冒泡：由具体的元素接收逐级传递到最不具体的那一个节点。
事件捕获:由不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

使用事件处理程序

1. html事件处理程序。缺点：html代码和js代码紧密耦合。

2. DOM0级事件处理程序。

3. DOM2级事件处理程序。

   • DOM2级事件处理程序定义了两个方法：用于处理指定和删除事件处理程序。
     addEventListener（）和removeEventListener（）

   • 接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值

     //btn3.addEventListener('click',message,false);  

4. IE事件处理程序

   • attachEvent（）添加事件， detachEvent（）删除事件
     接收相同的两个参数：事件处理程序的名称和时间处理程序的函数。不加入布尔值的原因是IE8只支持事件冒泡

5. 跨浏览器解决

var eventUtil = {
            //添加事件
            addHandler:function(element, type, handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }
                else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                }
                else{
                    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] = handler;
                }
            }
            //获取事件对象
            getEvent:function(event){
                return event?event:window.event;
            },
            getType:function(event){
                return event.type;
            },
            getTarget:function(event){
                if(event.target){
                    return event.target;
                }
                else{
                    return event.srcElement;
                }
            },
            //阻止事件冒泡
            getStopPropagetion:function(event){
                if(event.stopPropagation){
                    return event.stopPropagation();
                }
                else{
                    return event.cancelBubble=true;
                }
            },
            //阻止事件默认行为
            getPreventDefault:function(event){
                if(event.preventDefault){
                    return event.preventDefault();
                }
                else{
                    return event.returnValue=false;
                }
            }
        }
        eventUtil.addHandler(btn3,'click', message);
        eventUtil.removeHandler(btn3,'click', message);   

事件对象

在触发DOM上的事件都会产生一个对象。
事件对象event

1. DOM中的事件对象。

   （1）type属性，获取事件类型。event.type
   （2）target属性，获取事件目标。
   （3）stopPropagation（）方法，用于阻止事件冒泡。
   （4）preventDefault（）方法，阻止事件的默认行为。

   2.IE中的事件对象

   （1）type属性，获取事件对象
   （2）srcElement属性，获取事件对象
   （3）cancelBubble=true方法，用于阻止事件冒泡
   （4）returnValue=false ，阻止事件的默认行为。

事件类型

鼠标事件
MouseEvent对象

属性 //鼠标事件发生时，鼠标的位置
    -clientX,clientY //和页面的距离
    -screntX,screntY //和屏幕的距离
    -ctrlKey,shiftKey,altKey,metaKey //当事件触发是，键盘是按下的，则为true
    -button(0,1,2) 

触发顺序

//一个窗口拖动的例子
//封装一个获取元素的方法，防止出现IE不兼容等问题
function getByClass(clsName,parent){
    var oParent = parent? document.getElementById(parent):document,
    eles = [],
    elements = oParent.getElementsByTagName('*');

    for(var i = 0, l = elements.length; i < l; i++){
        if(elements[i].className == clsName){
            eles.push(elements[i]);
        }
    }
    return eles;
}

window.onload = drag;


//在标题区按下
function drag(){
    var oTitile = getByClass("login_logo_webqq","loginPanel")[0];
    //移动
    oTitile.onmousedown = fnDown;
    //关闭窗口
    var oClose = document.getElementById("ui_boxyClose");
    oClose.onclick = function(){
        document.getElementById("loginPanel").style.display="none";
    }

}

//在页面中移动
//释放鼠标时停止移动
function fnDown(){
    var oDrag =  document.getElementById("loginPanel");

    document.onmousemove = function(event){
        event = event || window.event;//浏览器兼容
        oDrag.style.left = event.clientX + "px";
        oDrag.style.top = event.clientY + "px";
    }
    //释放鼠标
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup - null;
    }

}

• 键盘事件

事件代理

事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

例子
//html
<ul id="list">
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
</ul>
//js
window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判断目标事件是否为li*/
         alert(e.target.innerHTML);
       }
     },false);
}

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理