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){});