JavaScript常用事件总结归纳


1、鼠标事件

onclick  

 鼠标点击事件,当鼠标左键点击时候会触发。


ondbclick 

当鼠标双击时候会触发,并有一个时间间隔,但不能太大。


onmousedown    

鼠标按下事件,当鼠标左中右键(鼠标左键,鼠标滚轮,鼠标右键)按下(按下没有抬起)的时候触发


onmouseup

鼠标抬起事件,当鼠标左中右键抬起时候触发


onmousemove

鼠标移动事件,当鼠标移动到目标元素上就会触发,并会按照一定频率去触发


onmouseover

鼠标移入事件,当鼠标移入到目标元素上就会触发


onmouseout

鼠标移出事件,当鼠标从目标元素上移开的时候就会触发


onmouseenter

鼠标移入事件,当鼠标移入到元素身上就会触发


onmouseleave 

鼠标移出事件,当鼠标从元素身上移出的时候触发

注:onmouseover / onmouseout 与 onmouseenter / onmouseleave区别

onmouseover / onmouseout 事件,目标元素如果有子级元素的话,它会把事件传递给子集元素

onmouseenter / onmouseleave 事件,目标元素如果有子集元素,事件不会被传递给子集元素


2、键盘事件

onkeydown

当键盘按下去的时候会触发,如果键盘没有抬起来,那这个事件会一直触发。


onkeyup 

当键盘按钮抬起来的时候触发。


onkeypress

当键盘按下数字键或字母键可以触发,功能键除外(上下左右、ctrl、shift、alt)。


3、焦点事件

onfocus

当有焦点的元素获取到焦点时候触发(用tab键也会触发这个事件)


onblur

当有焦点的元素失去焦点时候触发


注:支持onfocus的对象

button、checkbox、fileUpload、layer、frame、password、radio、reset、select、submit、text、textarea、window。

4、滚轮事件

onmousewheel(IE/Chrom):

滚轮方向(event.wheelDelta)上:120;下:-120。

DOMMouseScroll (FF,FF下只能用addEventListener):

滚轮方向(event.detail)上:-3;下:3。

封装的滚轮事件

**********************************************************

function mScroll(obj,callBackUp,callBackDown){

    obj.onmousewHeel=fn;

    obj.addEventListener('DOMMouseScroll',fn);

    function fn(ev){

        if(ev.wheelDelta==120||ev.detail==-3){

            //这个条件成立说明鼠标都是往上滚动的

            callBackUp();

        }else{

            //这个条件成立说明鼠标都是往下滚动的

            callBackDown();

        }

        ev.preventDefault();

    }

}

***************************************************************************

调用函数

var text=document.getElementById('text');

mScroll(text,function(){

    text.value++;

},function(){

    text.value--;

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、DOM 什么是DOM?Document Object Model(文档对象模型)。DOM是针对HTML和XML...
    空谷悠阅读 4,536评论 0 2
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 5,062评论 0 6
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,560评论 2 10
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,582评论 0 0
  • 这些植物每天都在做这些事情,然后我们都关注不到他们。老师好不容易找到这株植物的(注:去年老师住在高新区)野生的植物...
    乍暖还寒的港湾阅读 1,211评论 0 0

友情链接更多精彩内容