事件机制

事件机制

一.事件的种类

    1.鼠标

        onclick  单击

        ondblclick 双击

        onmouseover  鼠标滑动上

        onmouseout   鼠标滑动走

        onmousemove  鼠标移动

        onmousedown  鼠标按下

        onmouseup    鼠标松开

        onmousewheel|DOMMouseScroll 鼠标滚轮    

    2.键盘事件

        onkeydown    按下

        onkeyup      弹起

    3.表单事件

        onfocus      获取焦点

        onblur       失去焦点

        oninput      实时监听文本框内容的改变

        onchange     失去焦点触发,监控内容的改变

        onreset

        onsubmit        

    4.页面事件

        onload      加载

        onresize    页面大小改变

        onscroll    滚动

二.事件绑定

     document.onclick = function(){

     }

     //绑定事件

function addEventHandler(obj,eventName,handler){

    //IE 方法

    if (document.attachEvent) {

        return obj.attachEvent("on"+eventName,handler);

    //非IE

    }else {

        return obj.addEventListener(eventName, handler,false);

    }

}

三.移除事件

    //移除

function removeEventHandler(obj,eventName,handler){

    if (document.attachEvent) {

        return obj.detachEvent("on"+eventName,handler);

    }else {

        return obj.removeEventListener(eventName, handler,false);

    }

}

四.事件对象

    每个事件执行的时候,在方法里有event对象,具有n多属性

    function (ev){

        var event = ev|| event;

    }

    event对象中的属性

    鼠标event.clientX 鼠标移动

    键盘event.keyCode 键盘字母所对应码

    滚轮event.wheelDelta||event.detail  

五.阻止冒泡

    当子元素和父元素的事件相同时,子元素事件触发了,会引起父元素的事件也触发

    function stopBubble(ev){

    var event = ev||event;

    if (event.stopPropagation()) {

        event.stopPropagation();

    }else{

        event.cancelBubble = true;

    }

}

六.阻止浏览器的默认行为

    //阻止浏览器默认行为

function prevent(ev){

    var event = ev||event;

    if (event.preventDefault()) {

        event.preventDefault();

    }else{

        event.returnValue = false;

    }

}