DOM事件

DOM事件
事件是文档或者浏览器窗口中发生的特定的交互瞬间
JavaScript 与 HTML的交互通过事件完成

动作通过事件触发

事件流

描述的是从页面中接受时间点额顺序
IE 事件冒泡流
事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个元素节点）接受，然后逐级向上传播至最不具体的那个节点（文档）
Netscape 事件捕获流
事件捕获： 不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
事件程序处理程序
1、HTML事件处理程序
直接把方法添加在HTML代码上 HTML和JS代码紧密耦合联系在一起，例：

<input type="button" id="btn" value="按钮" onClick="alert('hello')">
    <input type="button" id="btn" value="按钮" onClick="showMessage()">

2、DOM 0级事件处理程序
较传统的方式：把一个函数赋值给一个事件的处理程序属性 （用的较多的方法 简单 跨浏览器） 与HTML代码分离。例：

var btn2 = ducoment.,getElementById(‘btn2’);
    btn2.onclick = function (){alert(“test”);}
    btn2.onclick = null;   //删除事件

3、DOM2级事件处理程序
定义两个方法 用于处理指定和删除时间处理程序的操作 addEventListener()和removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值 true表示在捕获阶段处理 false代表在冒泡阶段处理。例：

    var btn3 = ducoment.,getElementById(‘btn3’);
    btn3.addEventListener(‘click’,showMessage,false);
    btn3.removeEventListener(‘click’,showMessage,false); //删除事件

2、3可以给元素添加多个事件处理程序, 按顺序执行 例：
btn3.addEventListener(‘click’,showMessage,false);
btn3.addEventListener(‘click’,function(){
alert(this.value);} ,false);
4、IE时间处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件的名称 和处理事件程序的函数名
例：btn3.attachEvent (‘onclick’,showMessage);

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] = null;
        }
    }

    getEvent:function(e){
        return e? e: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{
            Event.returnValur = false;
        }
    }

    stopPropagation:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            Event.cancleBubble = true;
        }
    }
}
eventUtil.addHandler(btn3, ‘click’, showMessage)；

DOM对象

在触发DOM上的时间时都会产生一个对象
1、 DOM中的事件对象
.type 获取事件类型
.target 获取事件的目标 绑定在哪个对象上
例：event.target.nodeName
.stopPropagation() //停止事件冒泡
.preventDefault() //阻止事件默认行为
例：

function showMessage(event){
        alert(event.type);
}

bubbles属性 cancelable属性
2、 IE中的事件对象
.type 获取事件类型
.srcElement 获取事件的目标 绑定在哪个对象上
例: var ele = event.target || event.srcElement;
event = event || window.event;

.cancleBubble属性 //阻止事件冒泡 true表示阻止冒泡 false表示不阻止冒泡
.returnValue属性 //阻止事件的默认行为

鼠标事件
拖拽事件 被拖拽的元素用绝对定位

// JavaScript Document
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;

}

function fnMove(event, disX, disY){
    var oDrag = document.getElementById('divLogin'),
        l = event.clientX-disX,
        t = event.clientY - disY,
        winW = document.documentElement.clientWidth || document.body.clientWidth,
        winH = document.documentElement.clientHeight || document.body.clientHeight,
        maxW = winW-oDrag.offsetWidth,
        maxH = winH-oDrag.offsetHeight;

    if(l <0) {
        l=0;
    }else if(l >maxW){
        t= maxW;
    }
    if(t<0) {
        t=0;
    }else if(t >maxH){
        t = maxH;
    }

    oDrag.style.left =  l+ 'px';
    oDrag.style.top =  t+'px';
}

function fnDown(event){
    event = event || window.event;
    var oDrag = document.getElementById('divLogin'),
        disX = event.clientX-oDrag.offsetLeft,
        disY = event.clientY - oDrag.offsetTop;
    document.onmousemove = function (event){
        event = event || window.event;
        fnMove(event, disX, disY);
    };

    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    };
}
window.onload = drag;
function drag(){
    var oTitle = document.getElementById('title');
    oTitle.onmousedown=fnDown;

    var close = document.getElementById ('close');
    close.onclick = function(){
        document.getElementById ('divLogin') .style.display='none';
    };
}

getElementByClassName()在IE 10 之前不支持

function getByClass(clsName, parent){    //必须要填的参数填前面，可选参数填后面
    var oParent = parent?document.getElementById(parent):document,
        eles = [],
        elements = oParent.getElementsByTagName(‘*’);
    for(var i=0, l=elements.length; i<1; i++){
        if(elements[i].className == clsName){
            eles.push(elements[i]);
}
}
    return eles;
}

键盘事件

keyDown 按下键盘上的任意键触发 而且如果按住不放则会重复触发事件
keypress 按下键盘上的字符按键触发
keyUp 松开按键时触发