JavaScript 鼠标事件(MouseEvent)案例讲解

鼠标事件-MouseEvent

当鼠标进行某种操作时，就会生成一个event对象，该对象记录着鼠标触发事件时的所有属性。

可以通过如下方法在google控制台打印出 MouseEvent 对象。

function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onload = function (){
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

打印出来的 MouseEvent  如下：

该对象属性很多，但最常用的 不过 offsetX、offsetY、clientX/clientY、pageX、pageY。各个属性对应的是什么呢？ 

下面列出一下常用的事件

altkey ： 触发鼠标事件时是否alt 按键被按下,如果按下，则返回true，否则返回 fasle。

button:  事件属性返回一个阿拉伯数字 ， 0代表 按下 左键 ，1 代表按下 滚轮 ，2 代表按下 右键。

offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。

clientX、clientY ： 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标、垂直坐标。

pageX、pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。

screenX、screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标，此时的参照点也就是原点是屏幕的左上角。

好吧，文字叙述总归是很烦，上个经典的图，解释一切 ：

到此这篇关于JavaScript 鼠标事件(MouseEvent)案例讲解的文章就介绍到这了,更多相关JavaScript 鼠标事件(MouseEvent)内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS addEventListener()和attachEvent()方法实现注册事件

    JS addEventListener()和attachEvent()方法实现注册事件

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件.用法如下: element.addEventListener(String type, Function listener, boolean useCaptrue); 参数说明如下: type:注册事件的类型名.事件类型与事件属性不同,事件类型名没有 on 前缀.例如,对于事件属性 onclick 来说,所对应的事件类型为 click. listener:监听函数,即事件处理函数

  • javascript事件循环event loop的简单模型解释与应用分析

    本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

  • JavaScript中EventBus实现对象之间通信

     一.什么是EventBus? 我个人理解:EventBus 可以实现对象之间的通信,当数据或某些特性发生改变时,能自动监听事件作出一些改变.还有更多的内容可能我还没有拓宽.怎么实现通信呢?这里通过一个例子可以理解到其中的精髓. 二.一个简单的例子 add(){ data+=1; render(data); }, minus(){ data-=1; render(data); }, multiply(){ data*=2; render(data); }, divide(){ data/=2;

  • js中addEventListener()与removeEventListener()用法案例分析

    本文实例讲述了js中addEventListener()与removeEventListener()用法.分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加. 接受参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. (3个) 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.默认为false; 事件传递有两

  • Js on及addEventListener原理用法区别解析

    一.首先介绍两者的用法: 1.on的用法:以onclick为例 第一种: obj.onclick = function(){ //do something.. } 第二种: obj.onclick= fn; function fn (){ //do something... } 第三种:当函数fn有参数的情况下使用匿名函数来传参: obj.onclick = function(){fn(param)}; function fn(param){ //do something.. } 不能够这样写:

  • node.js中对Event Loop事件循环的理解与应用实例分析

    本文实例讲述了node.js中对Event Loop事件循环的理解与应用.分享给大家供大家参考,具体如下: javascript是单线程的,所以任务的执行都需要排队,任务分为两种,一种是同步任务,一种是异步任务. 同步任务是进入主线程上排队执行的任务,上一个任务执行完了,下一个任务才会执行. 异步任务是不进入主线程,而是进入一个 "任务队列" 里,"任务队列" 通知主线程,该异步任务才会进入主线程执行. 任务的运行机制如下: 1.所有同步任务在主线程上执行,形成一个

  • JS事件循环机制event loop宏任务微任务原理解析

    首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的

  • node.JS事件机制与events事件模块的使用方法详解

    node.JS事件机制说明 多数 Node.js 核心 API 都是采用惯用的异步事件驱动架构,其中某些类型的对象(称为触发器)会周期性地触发命名事件来调用函数对象(监听器).例如,一个net.Server对象会在每次有新连接时触发一个事件:一个 fs.ReadStream 会在文件被打开时触发一个事件:一个 stream会在数据可读时触发事件. EventEmitter EventEmitter 类由 events 模块定义和开放的,所有能触发事件的对象都是 EventEmitter 类的实例

  • JavaScript 鼠标事件(MouseEvent)案例讲解

    JavaScript 鼠标事件(MouseEvent)案例讲解

    鼠标事件-MouseEvent 当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEvent 对象. function mouseDown(e){ var e = e||event; console.log(e) } window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('moused

  • JavaScript之事件循环案例讲解

    js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队

  • JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('box'); //找到id为box的div document.body.onmouseup = function(e){ //在body里点击触发事件 if(e.button===2){ //如果button=1(鼠标左键),butto

  • javascript 鼠标事件总结

    javascript 鼠标事件总结

    常见的有以下8个: mousedown:鼠标的键钮被按下. mouseup:鼠标的键钮被释放弹起. click:单击鼠标的键钮. dblclick:鼠标的键钮被按下. contextmenu :弹出右键菜单. mouseover:鼠标移到目标的上方. mouseout:鼠标移出目标的上方. mousemove:鼠标在目标的上方移动. mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click.因此一个点击事件,

  • javascript滚轮事件基础实例讲解（37）

    本文实例为大家分享了js滚轮事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script

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

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

    本文实例讲述了JavaScript常见鼠标事件与用法.分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下. mouseup 鼠标的键钮释放弹起. click 鼠标左键(或中键)被单击. 事件触发顺序是:mousedown -> mouseup -> click dblclick 鼠标左键(或中键)被双击. 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->

  • 学习JavaScript鼠标响应事件

    学习JavaScript鼠标响应事件

    本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r

  • JavaScript防抖案例讲解

    原理 防抖的原理是:你尽管触发事件,但是我一定要在事件触发n秒之后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后再执行.总之,就是要等到你触发完事件n秒内不再触发事件,我才执行. 案例 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="

  • JavaScript事件学习小结(五）js中事件类型之鼠标事件

    JavaScript事件学习小结(五）js中事件类型之鼠标事件

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

  • JavaScript事件方法(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text

随机推荐