JavaScript常见鼠标事件与用法分析

本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考，具体如下：

JavaScript 鼠标事件有以下8种

mousedown
鼠标的键钮被按下。

mouseup
鼠标的键钮释放弹起。

click
鼠标左键（或中键）被单击。

事件触发顺序是：mousedown -> mouseup -> click

dblclick
鼠标左键（或中键）被双击。

事件触发顺序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。

contextmenu
弹出右键菜单，它可能是鼠标右键触发的，也可能是键盘的菜单键触发的。

mouseover
鼠标移动到目标上方。

mouseout
鼠标从目标上方移出。

mousemove
鼠标在目标上方移动

注意：事件名称大小写敏感。若需要监听以上事件，则在事件名的前面加个on即可。

事件区别

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

全局事件对象event

event.x
事件发生时鼠标的位置

event.y
事件发生时鼠标的位置

button
鼠标的哪一个键触发的事件

0
鼠标左键
1
鼠标中键
2
鼠标右键

代码范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += str + "<br/>";
      }
      document.onmousedown = function() {
        appendText("onmousedown");
        appendText("button = " + event.button);
        appendText("(x,y) = " + event.x + "," + event.y);
      }
      document.onmouseup = function() {
        appendText("onmouseup");
      }
      document.onclick = function() {
        appendText("onclick");
      }
      document.ondblclick = function() {
        appendText("ondblclick");
      }
      document.oncontextmenu = function() {
        appendText("oncontextmenu");
      }
      document.onmouseover = function() {
        appendText("onmouseover");
      }
      document.onmouseout = function() {
        appendText("onmouseout");
      }
      document.onmousemove = function() {
        appendText("mousemove");
      }
    </script>
  </body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，得到如下运行结果：

感兴趣的朋友可以使用本站在线工具测试一下上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript键盘事件常见用法实例分析

    JavaScript键盘事件常见用法实例分析

    本文实例讲述了JavaScript键盘事件常见用法.分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键. keyup 键盘按键弹起,可以捕获组合键. 全局事件对象event event.ctrlKey 功能键"ctrl"键是否按下. event.altKey 功能键&qu

  • JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听 利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

  • javascript中的event loop事件循环详解

    前言 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是

  • JavaScript常用事件介绍

    JavaScript常用事件介绍

    JavaScript 事件(常用) 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件.比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数.事件在HTML 页面中定义. 事件举例: 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意:事件通常与函数配合使用,当事件发生时函数才会执行. 事件三要素 事件源.事件.事件驱动程序. 三句话:获取事件源.绑定事件.书写事件驱动程序. 1.获取事件源:docu

  • Node.js EventEmmitter事件监听器用法实例分析

    本文实例讲述了Node.js EventEmmitter事件监听器用法.分享给大家供大家参考,具体如下: Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. events 模块只提供了一个对象: events.EventEmitter.EventEmitter 的核心就是事件触发与事件监听器功能的封装. 该模块已被node.js默认引,不需要使用require()显示引入. EventEmitter 对象如果在实例化时发生错误,会触发 'error' 事件.当添加新的监

  • 浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

  • Javascript中绑定click事件的四种方式介绍

    一:HTML中添加onclick <button id="vv" onclick="myfunction()" >哈哈</button> 二:JS中定义函数绑定事件! var funcc = function () { alert('我爱编程') } var aa = document.getElementById('vv') aa.onclick = funcc 三:直接定义函数与内容 document.getElementById('vv

  • Node.js net模块功能及事件监听用法分析

    Node.js net模块功能及事件监听用法分析

    本文实例讲述了Node.js net模块功能及事件监听用法.分享给大家供大家参考,具体如下: net模块 对比C语言的网络编程,Node.js有更加简便的开发模式与模块提供.它就是net模块 在需要使用的时候只需要require("net")就可以引入模块了. var net = require("net"); 服务端编程 引入模块的前提下: 1. 创建一个新的TCP或IPC服务 var server = net.createServer(function(clie

  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性:event = event || window.event 事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变): event.target(点击的目标对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript事件对象深入详解

    本文实例讲述了JavaScript事件对象.分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素.事件的类型以及其他与特定事件相关的信息.所有的浏览器都支持 event 对象,但支持的方式不同. 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序(DOM0 级与 DOM2 级都支持): var btn = document.getElementById("myBtn&quo

随机推荐