js事件

一、在事件中加入参数可以触发

window onload = function( ) {

    var e = e || window.event;

    console.log( e );

}

 

二、鼠标事件

• onclick  鼠标点击并放开后才触发
• onmouseover  鼠标移进去，触发
• onmouseout  鼠标移走，触发
• onmousemove  鼠标移进去后不停的触发
• onmousedown  鼠标点击就触发
• onmouseup  鼠标放开后才触发
• ondblclick  鼠标双击触发
• oncontextmenu  鼠标右击触发
• onmouseenter  可以用来取代onmouseover并且效果更好，只是有兼容问题
• onmouseleave  可以用来取代onmouseout并且效果更好，只是有兼容问题

 

三、表单事件

• onchange  改变选单时触发
• onfocus  聚焦时触发（常用在文本框）
• onblur  散焦时触发（常用在文本框）
• onsubmit  提交时触发

 

四、模拟事件

• obj.focus( );  自动模拟聚焦
• obj.click( );  自动点击模拟
• 事件去掉“on”后大致可作模拟事件

 

五、e.clientX 与 e.clientY

• 获取光标的 left 和 top

 

六、键盘事件

• onkeydown  键盘按下时触发
• alert( e.keyCode ); 获取键盘上字符对应的code码
• onkeyup  键盘放开时触发
• e.ctrlkey  添加Ctrl键点击

 

七、滚轮事件

• document.onmousewheel=function (){} //谷歌、IE，不兼容火狐
  向下滚为负值，向上滚为正值
• document.addEventListener("DOMMouseScroll", function (){}, false); //火狐
  向下滚为正值，向上滚为负值

滚轮函数：

function mousewheel(obj,succFn){
    if (window.navigator.userAgent.indexOf("Firefox")!=-1){
        obj.addEventListener("DOMMouseScroll", fn, false);
    }else{
        obj.onmousewheel=fn;
    }
    function fn(e){
        var e=e||window.event;
        var down=true;
        if (e.detail){
            //火狐
            down=e.detail>0;
        }else{
            //谷歌，ie
            down=e.wheelDelta<0;
        }
        succFn(obj,e,down);
        if (e.preventDefaul){
            e.preventDefault();
        }
        return false;
    }
}

调用：

    mousewheel(obj,function(e,down){});