JavaScript：事件

1. 事件对象|事件冒泡

    // 示例代码：[鼠标点击事件]的事件对象
    var oBtn=document.getElementById('btn1'); // 按钮DOM
    oBtn.onclick=function (ev) // 按钮DOM绑定点击事件
    {
        // 获取事件
        var oEvent=ev||event;
        
        // 阻止事件冒泡
        oEvent.cancelBubble=true;
　　　　 oEvent.stopPropagation();
    };

 

2. 鼠标事件

鼠标事件:由鼠标操作触发的事件.
比如：onclick，ondblclick，onmouseover，onmouseout，onmousedown，onmouseup，onmousemove

通过鼠标事件,可以获取鼠标的可视区位置，可用于类似拖拽之类的功能。
可视区位置：clientX、clientY

    // 示例代码：
    document.onmousemove=function (ev)
    {
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1'); // 要拖动的div
        
        var pos=getAbsolutePosition(oEvent);
        
        oDiv.style.left=pos.x+'px';
        oDiv.style.top=pos.y+'px';
    };

    // 根据鼠标触发的事件,获取鼠标的[绝对位置]
    function getAbsolutePosition(ev){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
        
        return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
    }

 

3. 键盘事件

键盘事件：由键盘操作触发的事件。
比如：onkeydown，onkeyup，onkeypress

通过键盘事件可以实现通过键盘按键进行提交、通过键盘按键控制物体移动等功能。
如果用于提交,一般绑定在要提交的输入框上。
如果用于控制物体的移动,可以绑定到document上。

常用属性：ctrlKey、shiftKey、altKey

    // 示例代码：
    // 获取键盘码
    document.onkeydown = function (ev)
    {
        var oEvent=ev||event;
        console.log(oEvent.keyCode);
        
        if(oEvent.keyCode==13 && oEvent.ctrlKey) // 同时按Ctrl+Enter
        {
            alert("您同时按下了Ctrl+Enter。");
        }
    }

 

4. 默认行为

    // 示例代码1：
    document.oncontextmenu = function(ev)
    {
    
        // .... 此处可实现自定义右键菜单
        
        return false; // 阻止右键菜单
    }
    
    // 示例代码2：
    var oTxt=document.getElementById('txt1'); // 一个输入框
    // 只允许输入数字和退格
    oTxt.onkeydown=function (ev){
        var oEvent=ev||event;
        
        if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)){
            return false;
        }
    };

 

5. 事件绑定

    // 示例代码:
    // 给一个元素添加两个click事件
    document.onload = function()
    {
        var oBtn=document.getElementById('btn1');
        
        myAddEvent(oBtn, 'click', function (){
            alert('a');
        });
        
        myAddEvent(oBtn, 'click', function (){
            alert('b');
        });
    }

    // 自定义事件绑定
    function myAddEvent(obj, ev, fn){
        if(obj.attachEvent){ // IE
            obj.attachEvent('on'+ev, fn);
        }
        else{ // FF、CHROME
            obj.addEventListener(ev, fn, false);
        }
    }