js鼠标事件大全

移动端jstouch事件随着智能⼿机和平板电脑的普及, 越来越多的⼈⽤移动设备浏览⽹页，我们平时在pc浏览器上⽤的⿏标事件，⽐如：click, mouseover等，已经⽆法满⾜移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。

触摸事件包含4个接⼝。

TouchEvent代表当触摸⾏为在平⾯上变化的时候发⽣的事件.Touch代表⽤户⼿指与触摸平⾯间的⼀个接触点.TouchList代表⼀系列的Touch; ⼀般在⽤户多个⼿指同时接触触控平⾯时使⽤这个接⼝.DocumentTouch包含了⼀些创建 Touch对象与TouchList对象的便捷⽅法.TouchEvent接⼝可以响应基本触摸事件（如单个⼿指点击），它包含了⼀些具体的事件，事件类型：touchstart : 触摸开始（⼿指放在触摸屏上）touchmove: 拖动（⼿指在触摸屏上移动）touchend : 触摸结束（⼿指从触摸屏上移开）touchenter ：移动的⼿指进⼊⼀个dom元素。

touchleave ：移动的⼿指离开⼀个dom元素。

还有⼀个touchcancel，是在拖动中断时候触发。

事件属性：altKey : 该属性返回⼀个布尔值，表⽰在指定的事件发⽣时，Alt 键是否处于按下状态， event.altKey=true|false|1|0type : 触摸时触发的事件类型，⽐如touchstart每个触摸事件都包括了三个触摸属性列表：1. touches：当前位于屏幕上的所有⼿指触摸点的⼀个列表。

2. targetTouches：当前元素对象上所有触摸点的列表。

3. changedTouches：涉及当前事件的触摸点的列表。

它们都是⼀个数组，每个元素代表⼀个触摸点。

每个触摸点对应的Touch都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发⽣的位置对于屏幕的偏移量，clientX/clienYt和pageX/pageY都代表事件发⽣位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动⽽隐藏的偏移量，⽽pageX/pageY包括对象滚动⽽隐藏的偏移量。

js事件（Event）知识整理⿏标移动到⽬标元素上的那⼀刻，⾸先触发mouseover之后如果光标继续在元素上移动，则不断触发mousemove如果按下⿏标上的设备(左键,右键,滚轮……)，则触发mousedown当设备弹起的时候触发mouseup⽬标元素的滚动条发⽣移动时(滚动滚轮/拖动滚动条。

)触发scroll滚动滚轮触发mousewheel，这个要区别于scroll⿏标移出元素的那⼀刻，触发mouseout平常我们绑定事件的时候⽤dom.onxxxx=function(){}的形式这种⽅式是给元素的onxxxx属性赋值，只能绑定有⼀个处理句柄。

但很多时候我们需要绑定多个处理句柄到⼀个事件上，⽽且还可能要动态的增删某个处理句柄下⾯的事件注册⽅式就能解决这个需求。

复制代码代码如下://IE以外target.addEventListener(type,listener,useCapture)target.removeEventListener(type,listener,useCapture);target ：⽂档节点、document、window 或 XMLHttpRequest。

type ：字符串，事件名称，不含“on”，⽐如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接⼝或者是 JavaScript 中的函数。

useCapture ：是否使⽤捕捉，⼀般⽤ false。

//IEtarget.attachEvent(type, listener);target.detachEvent(type, listener);target ：⽂档节点、document、window 或 XMLHttpRequest。

type ：字符串，事件名称，含“on”，⽐如“onclick”、“onmouseover”、“onkeydown”等。

事件(上)(不好意思,又是标题党)JavaScript事件列表事件解说一般事件onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件onkeypress当键盘上的某个键被按下并且释放时触发此事件.onkeydown当键盘上某个按键被按下时触发此事件onkeyup当键盘上某个按键被按放开时触发此事件页面相关事件onabort 图片在下载时被用户中断onbeforeunload当前页面的内容将要被改变时触发此事件onerror 出现错误时触发此事件onload 页面内容完成时触发此事件onmove 浏览器的窗口被移动时触发此事件onresize当浏览器的窗口大小被改变时触发此事件onscroll浏览器的滚动条位置发生变化时触发此事件onstop浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断oncontextmenu 当弹出右键上下文菜单时发生onunload 当前页面将被改变时触发此事件表单相关事件onblur 当前元素失去焦点时触发此事件onchange当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus 当某个元素获得焦点时触发此事件onreset当表单中RESET的属性被激发时触发此事件onsubmit 一个表单被递交时触发此事件了解上面的事件如此简单，那么事件还有什么可讲的呢？问题一：每个事件只能注册一个函数Js代码1var oDiv = document.getElementById("oDiv");2oDiv.onclick = fn1;3oDiv.onclick =fn2;4function fn1() {alert("我被覆盖了！")}5function fn2() {alert("只有我被执行到！")}解决方案一：Js代码6obj.onclick = function () {7 fn1();8 fn2();9 fn3();10};缺陷一：需要将所有函数一次添加进去，不能在运行时添加缺陷二：在事件处理函数中this将指向window,而不是obj解决方案二：Js代码11function addEvent(fn,evtype,obj) {12 //obj是要添加事件的HTML元素对象13 //evtype是事件名字，不包含on前缀，因为每个都有on，所以写个on是多余的14 //fn是事件处理函数15var oldFn;16if (obj["on"+evtype] instanceof Function) {17 oldFn = obj["on"+evtype];//当添加函数时，如果已注册过了，则将其保存起来18 }19 obj["on"+evtype]=function () {20if (oldFn) {21 oldFn.call(this);22 }23 fn.call(this);//使用call方法，使事件处理函数中的this仍指向obj24 };25}这样已经解决了问题，但如何删除事件呢？如果直接将对象的onevtype这类的属性赋值为null将会删除所有的事件处理函数！解决方案二的修改版：先将事件存储起来，存储在对象的__EventHandles属性里面Js代码26eventHandlesCounter=1;//计数器，将统计所有添加进去的函数的个数,0位预留作其它用27function addEvent(fn,evtype,obj) {28if(!fn.__EventID) {//__EventID是给函数加的一个标识，见下面给函数添加标识的部分29 fn.__EventID=eventHandlesCounter++;30 //使用一个自动增长的计数器作为函数的标识以保证不会重复31 }32if (!obj.__EventHandles) {33 obj.__EventHandles=[];//当不存在，也就是第一次执行时，创建一个，并且是数组34 }35if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放36 obj.__EventHandles[evtype]={};//当不存在时也创建一个散列表37if (obj["on"+evtype] instanceof Function) {38 //查看是否已经注册过其它函数39 //如果已经注册过，则将以前的事件处理函数添加到下标为0的预留的位置40 obj.__EventHandles[evtype][0]=obj["on"+evtype];41 obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数42 }43 }44 obj.__EventHandles[evtype][fn.__EventID]=fn;45 //如果函数是第一次注册为事件处理函数，那么它将被添加到表中，函数的标识作为下标46 //如果函数已经注册过相同对象的相同事件了，那么将覆盖原来的而不会被添加两次47function handleEvents() {48var fns = obj.__EventHandles[evtype];49for (var i in fns) {50 fns[i].call(this);51 }52 }53}使用上面的函数已经可以在一个对象添加多个事件处理函数，在函数内部this关键字也指向了相应的对象，并且这些函数都被作了标识，那么移除某个事件处理函数就是轻而易举的了！Js代码54//使用传统方法：obj.onevtype = null;但这样会移除所有的事件处理函数55function delEvent(fn,evtype,obj) {56if(!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) {57return false;58 }59if (obj.__EventHandles[evtype][fn.__EventID] == fn) {60delete obj.__EventHandles[evtype][fn.__EventID];61 }62 }-------------------------------------------------新手的分隔线----------------------------------------------------------------事件(下)事件对象——Event事件对象是用来记录一些事件发生时的相关信息的对象。

js各种事件如：点击事件、失去焦点、键盘事件等事件驱动：我们点击按钮按钮去掉⽤相应的⽅法。

demo：<input type="button" value="点击" onclick="func()">function func(){alert(1);}事件：onclick 点击onblur：失去焦点onfocus 得到焦点onkeydown 按下键盘onkeyup 松开键盘onkepress 按住键盘onmousedown 按下⿏标onmouseup 松开⿏标onmouseover 把⿏标放到上⾯ommousemove 移动⿏标onmouseout 移开⿏标onload ：页⾯加载onchange：改变onsubmit ：表单提交。

如何绑定事件：（1）<input type="button" value="点击" onclick="fun()">function fun(){alert(1);}（2） document.getElementById("bt").onclick=function(){alert(2);}（3） onload页⾯加载window.onload=function(){/* 页⾯加载完了以后在执⾏onload⾥⾯的⽅法 */}失去焦点得到焦点⼩案例<input type="text" id="te" onblur="fun();"/><br/><input type="text" id="xt" onfocus="func()" size="50"/>function fun(){/* 失去焦点 */var vas = document.getElementById("te").value;alert(vas);}function func(){/* 得到焦点 */var da = new Date();document.getElementById("xt").value=da.toLocaleString(); }。

JavaScript和JQuery的⿏标mouse事件冒泡处理简单的⿏标移动事件：进⼊复制代码代码如下:mouseenter：不冒泡mouseover: 冒泡不论⿏标指针穿过被选元素或其⼦元素，都会触发 mouseover 事件只有在⿏标指针穿过被选元素时，才会触发 mouseenter 事件移出复制代码代码如下:mouseleave: 不冒泡mouseout：冒泡不论⿏标指针离开被选元素还是任何⼦元素，都会触发 mouseout 事件只有在⿏标指针离开被选元素时，才会触发 mouseleave 事件我们通过⼀个案例观察下问题：给⼀个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不⼀样复制代码代码如下:<!DOCTYPE html><div class="out overout" style="width:40%;height:120px; margin:0 15px;background-color:#D6EDFC;float:left;" data-mce-style="width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">外部⼦元素</p><div class="in overout"style="width:60%;background-color:#FFCC00;margin:10px auto;" data-mce-style="width: 60%; background-color: #ffcc00; margin: 10px auto;"><p style="border:1px solid red" data-mce-style="border: 1px solid red;">内部⼦元素</p><pid="inshow">0</p></div><p id="outshow">0</p></div><script type="text/javascript">var i = 0;var k = 0;document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){document.querySelectorAll("#inshow")[0].textContent = (++i)e.stopPropagation();},false)document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){document.querySelectorAll("#outshow")[0].textContent = (++k)},false)</script>我们发现⼀个问题mouseout事件：1.⽆法阻⽌冒泡2.在内部的⼦元素上也会触发同样的问题还有mouseover事件，那么在stopPropagation⽅法失效的情况下我们要如何停⽌冒泡呢？1.为了阻⽌mouseover和mouseout的反复触发，这⾥要⽤到event对象的⼀个属性relatedTarget，这个属性就是⽤来判断mouseover和mouseout事件⽬标节点的相关节点的属性。

js⿏标单击和双击事件冲突问题的快速解决⽅法情况⼀如果在⼀个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发⽣双击事件时，第⼀次点击（click）会触发⼀次单击（click）事件，第⼆次点击（连续的）也会触发双击（dblclick）事件，还是会触发单击（click）事件（IE7与 firefox）。

解决⽅法：<button onclick="test(1)" ondblclick="test(2)"></button><script language="javascript">var i = 1;function test(n) {i = n;var val = setTimeout("call();",250);if(i==2){clearTimeout(val);}}function call() {if(i==1){alert('click');}else if(i==2){alert('dblclick');}}</script>解释：第⼀次点击记录下点击的时间，并设置单击事件的Timeout（250ms⽐较合适），第⼆次点击时判断此时点击的时间与上次点击的时间间隔，如果⼩于指定的事件间隔（⽐如250ms），则判断为双击事件，并clear已设置的Timeout（避免触发单击事件）。

第⼆种：<title>区分单击和双击</title><script type="text/javascript">var flag=0;function clickTest(){if(!flag){setTimeout("tt2();",300);}flag++;}function reset(){flag=0;}function singleClick(){var result=document.getElementByIdx_x('result');result.innerHTML=result.innerHTML+"click<br>";reset();}function dobuleClick(){var result=document.getElementByIdx_x('result');result.innerHTML=result.innerHTML+"dobule click<br>";reset();}function tt2(){if(flag==1){singleClick();}else{dobuleClick();}}</script></head><body><input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" /><div id="result"></div>以上这篇js⿏标单击和双击事件冲突问题的快速解决⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

JavaScript中常⽤的事件1.onclick事件点击事件（onclick并不是js中的⽅法，onclick只是浏览器提供js的⼀个dom接⼝，让js可以操作dom，所以onclick⼤⼩写都是没问题的，⽐如HTML代码就不⽤区分⼤⼩写）例：<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functionmyFunction(){alert("测试onclick点击事件");}</script></head><body><center><buttononclick="myFunction()">点击这⾥</button></center></body></html>onclick通常在下列基本对象中产⽣：button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)2.onload事件可以body执⾏，<bodyonload="alert(123)"></body>,其中onload后⾯可以写⼀个⽅法，如：onload="test()",然后在JavaScript中写⼀个test()⽅法，则在页⾯⼀开始加载的时候会先调⽤这个⽅法<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functiontest(){alert("测试onload⽅法");}</script></head><bodyonload="test()"></body></html>注意：此⽅法只能写在<body>标签之中3.onchange事件事件在内容改变的时候触发，和jQuery中的change()⽅法⼀样当内容改变时触发。

事件对象和事件冒泡1.事件对象点击了点了哪event.clientX 事件的信息event---IE 火狐下事件处理函数可以有参数ev function(ev) { ev.clientX;}兼容性处理if(ev){ev.clientX--------}else{event.clientX--------}x=ev.clientX||event.clientX var oEvent=ev||event2.事件流事件冒泡子级发生事件向父级反应父级事件也会响应处理方法取消、阻止冒泡子事件oEvent.cancelBuble=true;主要用处自定义的下拉列表3.鼠标事件鼠标的可视区坐标clientX clientY 鼠标坐标onmousemove 跟随鼠标的div 一定要加滚动条scrollTop scrollLeft(注意兼容性问题)一串跟随鼠标的div:每个div跟随上一个div走第一个div跟随鼠标绝对定位倒着循环（i=length-1;i>0;i--）{div[i].style.top=div[i-1].style.top ........}4.键盘事件onkeydown onkeyup onkeypressoffset offsetWidth offsetHeight offsetLeft top---- 得到长宽keyCode获得键码组合键ctrlKey shiftKey altKey 返回boolean值5.系统默认浏览器行为a)oncontextmenu 右键菜单一般禁止document.oncontextmenu=function(){returnfalse;}b)表单提交onsubmit return false;禁止表单提交用于表单校验c)onkeydown6.弹出自定义右键菜单7.只能输入数字的输入框记得允许backspace键8.拖拽onmousedown 存储鼠标与左上角的相对位置onmousemove 改变相应的位置onmouseup 停掉mousemovediv.onmousedown=function(ev){//计算div.onmousemove=function(ev){//计算};div.onmouseup()=function(){div.onmousemove=null;div.onmouseup=null;};};缺点容易被甩掉解决办法div.onmousedown=function(ev){//计算document.onmousemove=function(ev){//计算};document.onmouseup()=function(){document.onmousemove=null;document.onmouseup=null;};return false; //阻止一些空DIV拖拽bug};阻止用户拖到外面去设计算后的l :左边距t：上边距if(l<0){l=0;}//防止左边溢出if(l>document.documenyElement.clientWidth-div.style.width){ l=document.documenyElement.clientWidth-div.offsetWidth();}。

jsmouseovermouseout多次触发问题：当⿏标移动到元素上，多次触发mouseover,mouseout事件。

（注，该问题是在实现⿏标移动到⼀起菜单，滑动弹出⼆级时碰到的；因为⿏标移动到⼆级菜单时，动画再次触发，才意识到该问题；之前因为使⽤的是：hover伪类实现的显⽰⼆级菜单，并且没有加⼊动画，所以并没有发现该问题。

）问题原因分析：事件的冒泡机制，当⼦元素上发⽣相应事件时，会触发⽗级元素的该事件。

如A元素包含B元素，在A，B元素上分别添加mouseover,mouseout监听事件，当⿏标移到A上，但不在B上时，触发A的mouseover,同时对应的event.eventPhase为2即⽬标阶段；当⿏标继续移⼊B元素中时，这时触发A事件的mouseout，event.eventPhase为3，即冒泡阶段，同时触发B事件的mouseover,event.eventPhase 为2，即⽬标阶段。

解决⽅法：检测事件的相关元素（relatedTarget，对于mouseover来说:relatedTarget是⿏标进⼊元素前，所离开的元素；对于mouseout,relatedTarget是⿏标离开元素后，所进⼊的元素）是被绑定元素的⼦元素与否。

（或者利⽤jQuery的mouseenter,mouseleave事件，因为jquery已经将该事件封装）function contains(parentNode, childNode) {if (parentNode.contains) {return parentNode != childNode && parentNode.contains(childNode);} else {return !!(pareDocumentPosition(childNode) & 16);}}该函数是判断两个节点的关系，它考虑到IE与其他浏览器的兼容性，[dom].contains（[dom]）⽅法是IE浏览器的⽅法([dom]表⽰⽂档流中的节点)，[A].compareDocumentPosition([B])是DOM3中的⽅法，下⾯是不同位置关系对应的返回结果。

JavaScript的事件对象中的特殊属性和⽅法（⿏标，键盘）⿏标操作导致的事件对象中的特殊属性和⽅法⿏标事件是 Web 上⾯最常⽤的⼀类事件，毕竟⿏标还是最主要的定位设备。

那么通过事件对象可以获取到⿏标按钮信息和屏幕坐标获取等⿏标按钮只有在主⿏标按钮被单击时(常规⼀般是⿏标左键)才会触发 click 事件，因此检测按钮的信息并不是必要的但对于 mousedown 和 mouseup 事件来说，则在其 event 对象存在⼀个 button 属性，表⽰按下或释放按钮<script type="text/javascript">window.onload = function(){document.onclick = function (evt) {var e = evt || window.event; //实现跨浏览器兼容获取 event 对象alert(e.button);};};</script></head><body><input type="button" value="按钮"/></body>在绝⼤部分情况下，我们最多只使⽤主次中三个单击键，IE 给出的其他组合键⼀般⽆法使⽤上。

所以，我们只需要做上这三种兼容即可。

<script type="text/javascript">function getButton(evt) { //跨浏览器左中右键单击相应var e = evt || window.event;if (evt) { //Chrome 浏览器⽀持 W3C 和 IEreturn e.button; //要注意判断顺序} else if (window.event) {switch(e.button) {case 1 :return 0;case 4 :return 1;case 2 :return 2;}}}window.onload = function(){document.onmouseup = function(evt){ //调⽤if(getButton(evt) == 0) {alert('按下了左键！');}else if(getButton(evt) == 1){alert('按下了中键！');}else if(getButton(evt) == 2){alert('按下了右键！' );}};};</script>可视区及屏幕坐标事件对象提供了两组来获取浏览器坐标的属性，⼀组是页⾯可视区左边，另⼀组是屏幕坐标<style>#box{width: 300px;height: 300px;border: 1px solid red;}</style><script type="text/javascript">window.onload = function () {var oDiv = document.getElementById('box')oDiv.onclick = function (evt) {console.log(evt.clientX + ',' + evt.clientY);console.log(evt.screenX + ',' + evt.screenY);};}</script><body><div id="box"></div></body><style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style><script type="text/javascript">window.onload = function(){/** 当⿏标在areaDiv中移动时，在showMsg中来显⽰⿏标的坐标*///获取两个divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");/** onmousemove* - 该事件将会在⿏标在元素中移动时被触发** 事件对象* - 当事件的响应函数被触发时，浏览器每次都会将⼀个事件对象作为实参传递进响应函数,* 在事件对象中封装了当前事件相关的⼀切信息，⽐如：⿏标的坐标键盘哪个按键被按下⿏标滚轮滚动的⽅向。

JS事件汇总1. js事件 1.1 onclick 点击事件 1.2 onload ⽤户进⼊某个页⾯的时候触发（onload 事件可⽤于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载⽹页的正确版本。

） 1.3 onunload ⽤户离开某个页⾯的时候触发（onload 和 onunload 事件可⽤于处理 cookie。

） 1.4 onchange 内容变化事件（常结合对输⼊字段的验证来使⽤） 1.5 onmouseover ⿏标移动到HTML元素上⽅的事件 1.6 onmouseout ⿏标移出HTML元素上⽅的事件 1.7 onmousedown ⿏标按下的时候触发的事件 1.8 onmouseup ⿏标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是⿏标完成点击事件的时候触发的事件） 1.9 nfocus 元素获取焦点事件 1.10 onblur 元素失去焦点事件 1.11 onabort 图像的加载失败 1.12 ondblclick 双击事件 1.13 onerror 当加载图像和⽂档时发⽣错误 1.14 onkeydown 键盘按键被按下发⽣的事件 1.15 onkeyup 键盘按键被松开发⽣的事件 1.16 onkeypress 键盘按键按下并松开发⽣的事件 1.17 onmousemove ⿏标移动 1.18 onresize 窗⼝或者框架被重新调整⼤⼩ 1.19 onselect ⽂本被选中 1.20 onreset 重置按钮被点击 1.21 onsubmit 提交按钮被点击(阻⽌事件冒泡：ie使⽤ e.cancleBubble = true、e.stopPropagation()；取消默认事件： e.preventDefault()，IE则是使⽤e.returnValue = false )2. 绑定事件的⼏种⽅法 2.1 ⾏内绑定（缺点：不利于后期维护） 2.2 动态绑定 获取到dom元素，并在元素上绑定事件 （⾏内绑定中，其事件处理中的this指向了全局window对象；动态绑定中，其事件处理中的this指向了当前正在操作的dom对象） 2.3 事件监听 处理表格或者列表中的数据的时候使⽤事件委托的⽅式，只绑定⼀次事件，避免性能的损耗。

js中mousedown的用法
在JavaScript中，mousedown是一个事件，它在鼠标按键被按下时触发。

这个事件通常与鼠标的点击操作相关联，可以用来执行特定的代码或触发特定的行为。

mousedown事件可以通过addEventListener方法添加到DOM元素上，也可以直接在HTML标签中使用onmousedown属性来指定相应的处理函数。

当鼠标按键被按下时，mousedown事件会被触发，然后可以执行一些操作，比如改变元素的样式、触发动画效果、执行特定的逻辑等。

在事件处理函数中，可以通过event对象来获取关于鼠标按下事件的信息，比如鼠标按下的位置、按下的按键等。

需要注意的是，mousedown事件是在鼠标按下时触发的，而不是在鼠标松开时触发。

如果需要在鼠标按键被松开时触发相应的操作，可以使用mouseup事件。

总之，mousedown事件在JavaScript中的主要用法是用来捕获
鼠标按键被按下的操作，并在相应的事件处理函数中执行相应的代码或逻辑。

希望这个回答能够帮到你。

JS事件-对象监视事件，事件触发函数写在前⾯：⼀句话作为本⽂的核⼼思想：对象监视事件，事件触发函数；（⼀）事件1、事件分类（1）⿏标事件 click() ⿏标单击 dblclick() ⿏标双击 mouseover() ⿏标移⼊事件 mouseout() ⿏标移出事件 mousemove() ⿏标移动事件 mousedown() ⿏标按下事件 mouseup() ⿏标按键被松开事件 scroll 滚动事件（body）（2）键盘事件keydown 键盘按下keyup 键盘抬起（3）触摸事件touchstarttouchmove touchend（4）表单事件submit ⽤户提交表单时事件 select ⽂本框的⽂本被选中 focus 获得焦点事件 blur 失去焦点事件 change 内容改变事件（5）页⾯加载完毕事件load 页⾯加载完毕2、监视事件（1）在html标签上，通过on来监视<button onclick="check()">点击触发事件</button><script type="text/javascript">function check(){alert('hello');}</script>（2）通过JavaScript监视⽤户的⾏为<button >点击触发事件</button><script type="text/javascript">oBtn = document.getElementsByTagName('button');oBtn[0].onclick = function check(){alert('hello');}</script>（3）绑定事件监听器 addEventListener(‘事件类型’,事件发⽣产⽣的⾏为函数,true/false) attachEvent(‘事件类型’,’事件发⽣执⾏的函数’)给IE8以下的浏览器监视事件这部分内容灰常简单，记住常⽤的on监听即可，记住单击事件 click ，其他的套路都是⼀样⼀样的；替换click就OK啦！。