js常用鼠标事件(js鼠标双击事件)
JS鼠标事件大全 JS鼠标事件有哪些
1、如图首先在一个文件夹下创建index.html文件。
2、然后用可编辑文本文件的软件打开index.html文件，index.html的初始内容如图。
3、js的鼠标事件主要有onclick：单击事件ondbclick：双击事件onmouseover：鼠标移入事件onmouseout：鼠标移出事件onmousedown：鼠标按下事件onmouseup：鼠标松开事件。首先实现鼠标左键单击和双击的js代码如图。
4、编辑完index.html文件后，用浏览器打开index.html文件，效果如图。当鼠标左键单击span时显示"触发鼠标单击事件"，双击span时显示"触发鼠标双击事件"。
5、接着实现鼠标的移入和移出事件。如图修改index.html文件。
6、最后实现鼠标的点下和松起事件。如图修改index.html文件。
7、修改完index.html文件后，用浏览器打开index.html文件，效果如图。
js鼠标事件有哪些
js 鼠标事件详细
常用的几个类型
onClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标双击事件
onMouseDown
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标上的按钮被按下了
onMouseUp
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件
onMouseOver
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标移动时触发的事件
onMouseOut
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件
若想检测鼠标左键、右键点击事件可以用
事件button 值来检测
例如
document.onMouseDown =function(ev){
var oEvent = ev||event;
alert(oEvent.button);
}
此时button= 0、1、2分别对应于 鼠标左中右
JS—事件类型（焦点事件、鼠标事件（部分））
【需要注意】虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。
只定义了div2即棕色的那个div的事件
【解释enter与leave】：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。
【解释over与out】：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。
【总结】mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。
汇总js事件相关及事件处理模型
js事件是为了实现用户交互，比如当用户鼠标点击或者键盘输入时，浏览器会监听截获并且通知js做出反馈执行相应的函数，实现交互。
js的事件类型有很多，我们先来大概总结一下常用的JS事件
click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件
contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件
可通过事件对象的button属性来区分是左键\滚轮\右键，分别对应值 0 / 1 / 2
DOM3规定：click事件只能监听左键；只能通过mousedown和mouseup来判断鼠标键
keydown某键被按下时、keyup被松开时、keypress按下并且松开时
触发顺序：先 keydown，然后keypress，最后keyup
keydown和keypress的区别：
input：文本变化时触发
change：聚焦或失去焦点时判断状态是否改变，发生改变是触发change事件
focus：聚焦时触发
blur：失去焦点时触发
利用focus和blur可模拟placeholder
scroll：滚动条滚动时
load：页面加载完触发
abort：图像的加载失败
dblclick：双击事件
error：当加载图像和文档时发生错误
resize：窗口或者框架被重新调整大小
select：文本被选中时
reset：点击重置按钮时
submit：点击提交按钮时
接着看如何给DOM元素绑定事件处理函数
兼容性很好
但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。
IE8及以下不兼容
通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。
attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。
以上几种事件绑定方式里面的this指向有点区别：
也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身
封装一个兼容性的方法，用于绑定事件：
有的时候我们希望解除事件处理函数，那怎么办呢？
其实解除事件处理函数也对应有办法方法：
1. ele.onxxx = false / ' ' / null
2. ele.removeEventListener(type,fnName,false)
3. ele.attachEvent('on' + type,fnName)
值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！
不知道有没有发现，在上面绑定事件处理函数的时候，处理函数有个参数e或者叫event，其实是一个事件对象
事件对象就是处理函数里面的一个参数，说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。
为了兼容IE一般这么写： e = e || window.event
事件对象会有个属性target，这个target叫事件源对象，记录可事件具体在谁身上触发的那个源头
同样IE上事件源对象是e.srcElement，谷歌两个都有
所以为了兼容IE一般获取事件源对象是这么来写：
当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆
两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面
但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型
IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是结构上（非视觉上）嵌套的函数存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）
[注意]所有现代浏览器都支持事件冒泡
但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象
而事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它
即事件捕获是指： 结构上（非视觉上）嵌套的元素存在事件捕获功能，即同一事件自父元素冒泡向子元素（自顶向下）
注意IE上没有事件捕获，Chrome和新版本的Firefox等都实现了
一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型，要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时，最后一个参数默认是false表示的是，事件冒泡模型。如果改成true，立即变成事件捕获模型
如果一个dom元素的一个事件类型绑定了两个处理函数，两个函数的事件处理模型一个是事件冒泡一个是事件捕获，触发顺序是先捕获，后冒泡。
focus、blur、change、submit、reset、select等事件类型不冒泡
可以 利用事件冒泡和事件源对象可以叫事件委托给父元素
利用事件冒泡和事件源对象进行处理
优点：
性能好，不需要循环所有元素一个个绑定事件
灵活，当有其他新的子元素时，不需要重新绑定事件。
有的时候，我们不希望有冒泡功能，那我们怎么取消事件冒泡呢？
封装一个都好使的取消冒泡函数
有的时候我们需要阻止一些浏览器默认的事件
比如：表单提交、a链接跳转、右键菜单等
有几种方式：
参考资料：
DOM事件流的三个阶段
深入理解DOM事件机制系列第一篇——事件流
JS事件汇总
JS事件模型
事件1（上）
事件1（下）
DOM级别与DOM事件
DOM事件机制解惑
事件模型
JavaScript 事件委托详解
JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的区别
js怎么区分出点击的是鼠标左键还是右键？
js右键事件
DOM3级事件中定义了9个鼠标事件。
mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标 左键 或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标 左键 时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发， 该事件不冒泡 ，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发， 该事件不冒泡 ，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。
document.oncontextmenu =function(){return false};
document.body.onmouseup =function(e){
if(e.button===2){
console.log("右键");
? ? that.rightHand =true;
? }else if(e.button===1) {
console.log("中间键")
}else {
console.log("左键")
}
}