鼠标事件

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。

这些鼠标事件可以使用于除了：
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>其它所有HTML 元素

onclick 鼠标点击(单击)事件

定义和用法:：onclick 事件会在元素被点击时发生

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML DOM 鼠标点击事件</title><script>// 无参方法function myFunction() {document.getElementById("demo0").innerHTML = "Hello World";}// 带参数的方法function myNameFunction(name) {document.getElementById("demo1").innerHTML = "Hello " + name;}</script></head><body><p>单击按钮触发函数。无参数格式</p><button onclick="myFunction()">点我</button><p id="demo0"></p><hr /><p>单击按钮触发函数。有参数格式</p><button onclick="myNameFunction('张三')">点我</button><p id="demo1"></p></body>
</html>

ondblclick 鼠标双击事件

定义和用法：ondblclick 事件会在对象被双击时发生

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML DOM 鼠标点击事件</title><script>// 无参方法function myFunction() {document.getElementById("demo0").innerHTML = "Hello World";}// 带参数的方法function myNameFunction(name) {document.getElementById("demo1").innerHTML = "Hello " + name;}</script></head><body><p>双击按钮触发函数。无参数格式</p><button ondblclick="myFunction()">双击</button><p id="demo0"></p><hr /><p>双击按钮触发函数。有参数格式</p><button ondblclick="myNameFunction('张三')">双击</button><p id="demo1"></p></body>
</html>

oncontextmenu 鼠标右键点击事件

定义和使用：oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标右击事件</title><style>div {background: yellow;border: 1px solid black;padding: 10px;}</style></head><body><div oncontextmenu="myFunction()" contextmenu="mymenu"><p>在文本框内右击鼠标查看上下文菜单！</p><menu type="context" id="mymenu"><menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem><menu label="Share on..."><menuitem label="Twitter" icon="ico_twitter.png"onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem><menuitem label="Facebook" icon="ico_facebook.png"onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem></menu><menuitem label="向该网页发送邮件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem></menu></div><script>function myFunction() {alert("你在 div 元素总点击鼠标了右键。");}</script><p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p></body>
</html>

onmousedown 和 onmouseup 鼠标按键按下和松开事件

定义和用法：onmousedown 事件会在鼠标按键被按下时发生；onmouseup 事件会在鼠标按键被松开时发生
提示：与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：
1、onmousedown // 鼠标按下事件
2、onmouseup // 鼠标按键松开事件
3、onclick // 鼠标点击事件
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
1、onmousedown
2、onmouseup
3、oncontextmenu // 鼠标右击事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onmousedown  And onmouseup </title><script>function myFunction(elmnt, clr) {elmnt.style.color = clr;}</script></head><body><p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">单击文本改变颜色。触发一个带参数函数,当鼠标按钮被按下,,当释放鼠标按钮，再一次触发其他参数函数</p></body>
</html>

onmouseenter 和 onmouseleave 鼠标指针移入和移出事件

定义和用法：onmouseenter 事件在鼠标指针移动到元素上时触发；onmouseleave 事件在鼠标移出元素时触发。
提示： onmouseenter事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
提示： onmouseenter、onmouseleave 事件类似于 onmouseover、onmouseout 事件。唯一的区别是 onmouseenter 事件不支持冒泡。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onmouseenter And onmouseleave</title></head><style type="text/css">.box{width: 32px;height: 32px;background-color: aqua;}</style><body><div class="box" onmouseenter="bigBox(this)" onmouseleave="normalBox(this)"></div><p>onmouseenter: bigBox() 函数在用户将鼠标指针移动到该DOM时触发。</p><p>onmouseleave: normalBox() 函数在用户将鼠标指针移出DOM时触发。</p><script>function bigBox(x) {x.style.height = "64px";x.style.width = "64px";}function normalBox(x) {x.style.height = "32px";x.style.width = "32px";}</script></body>
</html>

onmouseover 和 onmouseout 鼠标指针移入和移出事件

定义和用法：onmouseover 事件会在鼠标指针移动到指定的元素上时发生；
onmouseout 事件会在鼠标指针移出指定的对象时发生。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onmouseover And onmouseout</title></head><style type="text/css">.box{width: 32px;height: 32px;background-color: aqua;}</style><body><div class="box" onmouseover="bigBox(this)" onmouseout="normalBox(this)"></div><p>onmouseover: bigBox() 函数在用户将鼠标指针移动到该DOM时触发。</p><p>onmouseout： normalBox() 函数在用户将鼠标指针移出DOM时触发。</p><script>function bigBox(x) {x.style.height = "64px";x.style.width = "64px";}function normalBox(x) {x.style.height = "32px";x.style.width = "32px";}</script></body>
</html>

onmousemove 鼠标指针移动事件

定义和用法：onmousemove 事件会在鼠标指针移到指定的对象时发生。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onmousemove</title><script>function moveCoordinate() {document.getElementById('moveX').innerHTML = event.offsetX;document.getElementById('moveY').innerHTML = event.offsetY;}</script></head><body style="width: 100%;height: 100%;"><div style="width: 800px;height: 600px;background-color: aqua;" onmousemove="moveCoordinate()"></div><p>X:<span id="moveX">0</span></p><p>Y:<span id="moveY">0</span></p></body>
</html>

HTML DOM 事件 —— 鼠标事件 JS鼠标事件相关推荐

html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'><div id="middle" oncli ...
html 获取鼠标参数,js鼠标点击特效，有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的博客后台管理设置本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦来个"红橙黄绿蓝靛 ...
JS焦点事件和事件冒泡
焦点事件 JS中focus事件获得焦点,blur失去焦点,这些事件默认情况下只有表单可以触发,如果想让div等元素触发需要加tabindex属性 <div class="list&qu ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
DOM | DOM树 + 获取元素 +事件基础 + 常见的鼠标事件
目录 DOM简介什么是DOM DOM树获取元素如何获取页面元素根据ID获取getElementById() 根据标签名获取getElementsByTagName() 通过 HTML5 新增的 ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
html鼠标键弹起事件,js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 ...

HTML DOM 事件 —— 鼠标事件 JS鼠标事件

鼠标事件

onclick 鼠标点击(单击)事件

ondblclick 鼠标双击事件

oncontextmenu 鼠标右键点击事件

onmousedown 和 onmouseup 鼠标按键按下和松开事件

onmouseenter 和 onmouseleave 鼠标指针移入和移出事件

onmouseover 和 onmouseout 鼠标指针移入和移出事件

onmousemove 鼠标指针移动事件

HTML DOM 事件 —— 鼠标事件 JS鼠标事件相关推荐

最新文章

热门文章