前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js鼠标事件

js鼠标事件

作者头像
十月梦想
发布2018-08-29 10:51:47
18.1K0
发布2018-08-29 10:51:47
举报
文章被收录于专栏:十月梦想十月梦想

页面加载事件(onload),鼠标双击事件(ondbclick)

代码语言:javascript
复制
window.onload=function(){
                //绑定元素,执行对应事件 鼠标双击(ondblclick)
                //鼠标双击事件ondblclick
                document.getElementById('d2').ondblclick=function(){
                    alert('我是双击显示的');
                }
            }

鼠标摁下(onmousedown)事件(摁下就执行,鼠标无需抬起)

代码语言:javascript
复制
            window.onload=function(){
                //绑定元素,执行鼠标按下操作  鼠标摁下(onmousedown)
                document.getElementById('d3').onmousedown=function(){
                    alert('我是鼠标摁下提示');
                }
            }

鼠标抬起(onmouseup)事件(摁下后,鼠标回弹才执行)

代码语言:javascript
复制
            window.onload=function(){
                //绑定元素,执行鼠标抬起事件   鼠标抬起(onmouseup)
                document.getElementById('d4').onmouseup=function(){
                    alert('鼠标抬起的提示');
                }
            }

鼠标移动(onmousemove)事件

代码语言:javascript
复制
            window.onload=function(){
                //绑定元素,执行鼠标移动事件   鼠标移动(onmousemove)
                document.getElementById('d5').onmousemove=function(){
                    alert('鼠标移动的提示');
                }
            }

鼠标移入(onmouseover)事件

代码语言:javascript
复制
            window.onload=function(){
                //绑定元素,执行鼠标移入事件   鼠标移入(onmousemove)
                document.getElementById('d6').onmouseover=function(){
                    alert('鼠标移入操作');
                }
            }

鼠标移出(onmouseout)事件    

代码语言:javascript
复制
            window.onload=function(){
                //绑定元素,执行鼠标移出事件   鼠标移出(onmouseout)
                document.getElementById('d7').onmouseout=function(){
                    alert('鼠标移出操作');
                }
            }

PS:鼠标移动(onmousemove)和鼠标移入(onmouseover)区别:移动事件指鼠标只要移动就产生事件,移入事件需要移入到指定的对象内才执行事件

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-1-5,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档