js鼠标事件

合集下载

JS鼠标事件

JS鼠标事件
JS鼠标事件是指在使用JavaScript编写网页的时候可以通过监听用户的鼠标行为来做出相应的动作。

当鼠标移动、点击、双击或者悬停到
特定的元素上时，JavaScript会捕获这些行为，并执行一些相应的操作。

JS中操作鼠标事件有以下常用事件：
1、onmouseover：当鼠标悬停在元素上时触发；
2、onmouseout：当鼠标离开该元素时触发；
3、onmousedown：当鼠标点击元素时触发；
4、onmouseup：当鼠标松开时触发；
5、onclick：当鼠标点击时触发；
6、ondblclick：当鼠标双击元素时触发；
7、onmousemove：当鼠标移动到元素上时触发；
8、oncontextmenu：当鼠标右键点击元素时触发；
9、onmouseenter：当鼠标进入元素时触发；
10、onmouseleave：当鼠标离开元素时触发。

使用这些事件，我们可以让网页在响应鼠标动作时可以立刻显示出来，比如当鼠标悬停到某个按钮上时，立刻显示弹出框，提示用户具体操
作等等。

当然，也可以添加其他JS鼠标事件来提升网页的交互性，比
如拖拽、右击等功能。

总之，JS鼠标事件为网页开发者提供了一系列
极其有用的功能，可以给网页带来更好的用户体验。

鼠标事件大全

onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件事件浏览器支持描述
onAbort IE4|N3|O 图片在下载时被用户中断
数据绑定事件浏览器支持描述
onAfterPrint IE5|N|O 当文档被打印后触发的事件
onBeforePrint IE5|N|O 当文档即将打印时触发的事件
onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件
onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件
编辑事件
事件浏览器支持描述
onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onDataAvailable IE4|N|O 当数据接收完成时触发事件
onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件
onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onDragStart IE4|N|O 当某对象将被拖动时触发的事件

js 控制鼠标事件防抖的方法

js 控制鼠标事件防抖的方法在前端开发中，鼠标事件防抖是常见的一种技术，它可以用于减少事件触发的频率，提升性能以及优化用户体验。

鼠标事件防抖的原理是延迟执行事件处理函数，在一段时间内只执行一次，从而避免事件频繁触发。

在本文中，我们将介绍如何使用JavaScript来实现鼠标事件防抖，并且探讨一些常见的应用场景。

鼠标事件防抖可以帮助我们解决一些实际问题，比如：当用户快速点击鼠标时，由于事件频繁触发，可能会导致页面性能下降，甚至出现一些意外的问题。

通过使用鼠标事件防抖技术，我们可以有效地减少事件触发的频率，保障页面的性能。

实现鼠标事件防抖的方法有很多种，其中比较常用的是使用setTimeout和clearTimeout来控制事件的触发。

我们可以在事件触发时设置一个定时器，在一定时间内不再触发事件时执行事件处理函数，当事件再次触发时清除定时器，重新设置定时器，从而实现防抖的效果。

接下来我们将通过一个实际的例子来演示如何使用JavaScript实现鼠标事件防抖。

首先，我们需要在HTML中添加一个按钮元素和一个显示被点击次数的文本元素：```html<!DOCTYPE html><html><head><title>Mouse Event Debounce Example</title></head><body><button id="clickButton">Click me</button><p>You've clicked the button <spanid="clickCount">0</span> times</p></body></html>```然后，在JavaScript中实现鼠标事件防抖的逻辑：```javascript//设置定时器和延迟时间let timeout;const delay = 1000;//获取按钮元素和显示点击次数的文本元素const clickButton =document.getElementById('clickButton');const clickCount = document.getElementById('clickCount');let count = 0;//定义事件处理函数function handleClick() {clearTimeout(timeout);count++;clickCount.textContent = count;timeout = setTimeout(() => {count = 0;clickCount.textContent = count;}, delay);}//添加事件监听器clickButton.addEventListener('click', handleClick);```在这个例子中，我们通过设置setTimeout和clearTimeout来实现鼠标事件的防抖。

js实现鼠标单击或者双击事件

js实现⿏标单击或者双击事件
// timer为全局变量
getClickEmail1(_type) {
clearTimeout(this.timer);
if (_type == 1) {
if (event.detail == 2) return;
this.timer = setTimeout(function() {
console.log("单击");
}, 300);
} else {
console.log("双击");
}
}
html如下：
<span
@click="getClickEmail1(1)"
@dblclick="getClickEmail1(2)"
>点我</span>
单击：⽤户单击触发 getClickEmail1(1) 函数，清除定时器这个先不管，if⾥的意思是如果在同样的地⽅执⾏同种⽅法两次，也就是双击的意思，退出这个函数，单击不会触发if。

下来给定时器赋值，300ms后执⾏输出单击的这句话，如果单击的话就不会在300ms⾥触发其他事件，所以单击解释完毕。

双击：⽤户双击触发两次click和⼀次dbclick。

第⼀次先执⾏aa函数，因为这是第⼀次所以不会return，300ms之间还没有等单击这两个字输出便再次触发了aa函数，次数记为两次，return出去，之后触发bb函数，输出双击两个字。

js鼠标移动、鼠标按下、鼠标释放和点击事件。

js⿏标移动、⿏标按下、⿏标释放和点击事件。

⿏标移动：mousemove⿏标按下：mousedown⿏标释放：mouseup点击事件：click<body><div class="box"></div><script> var box=document.getElementById("box"); box.onmousedown=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmouseup=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmousemove=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onclick=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY }//当⿏标按下，⿏标释放，和点击事件同时执⾏的时候，系统依次执⾏⿏标按下、⿏标释放、⿏标点击。

//获取X、Y的位置有两种⽅法。

1. e.clientX e.clientY 此⽅法是按照窗⼝左上⾓为原点进⾏获取的。

2. e.pageX e.pageY 此⽅法是按照⽂档左上⾓为原点进⾏获取的。

</script></body>事件委托：将⼦元素将要执⾏的事件委托给⽗元素，⽗元素执⾏事件时，通过事件对象，来判断是哪个⼦元素触发的事件。

事件冒泡：事件由内部向外部传播，外层如果有相同的事件，也会触发。

js中鼠标点击、移动和光标移动的事件触发

js中⿏标点击、移动和光标移动的事件触发事件有三要素：事件源、事件数据、事件处理程序
事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发
可以加return false;是阻⽌默认操作
onclick: ⿏标单击触发
ondblclick: 双击触发
onmouseover: ⿏标移动上⾯触发
onmouseout: ⿏标离开时触发
onmousemove: ⿏标在上⾯移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup：按键抬起来的时候触发
onkeypress：事件在⽤户按下并放开任何字母数字键时发⽣。

但是系统按钮（例如：箭头键、功能键）⽆法得到识别。

JS——各种事件

JS——各种事件⿏标事件⿏标事件指与⿏标相关的事件（滚轮），继承了MouseEvent接⼝。

问：⿏标事件有哪些？click , dblclick , mousedown , mouseup ,mousemove , mouseenter ， mouseover , mouseout , mouseleave , contextmenu( 按下右键)， wheel（滑轮滚动）【后⾯这两个也是，别忘记】mouseenter事件只触发⼀次，在⽗节点内部进⼊⼦节点，不会触发mouseenter事件，但是会触发mouseover事件。

mouseout事件和mouseleave事件，都是⿏标离开⼀个节点时触发。

两者的区别是，在⽗元素内部离开⼀个⼦元素时，mouseleave事件不会触发，⽽mouseout事件会触发。

（mouseover与mouseout这两个O字母开头的事件会受到⿏标在⼦⽗亲之间变化的影响）MouseEvent实例属性有哪些？MouseEvent接⼝继承了Event接⼝，所以拥有Event的所有属性和⽅法。

它还有⾃⼰的属性和⽅法。

screenX （屏幕）， screenY ， clientX（程序窗⼝），offsetX(返回⿏标位置与⽬标节点左侧的padding边缘的⽔平距离（单位像素）) , offsetY, clientY ，pageX,pageY(属性返回与⽂档上侧边缘的距离（单位像素）。

它们的返回值都包括⽂档不可见的部分。

这两个属性都是只读。

) ctrlKey （是否按下了ctrl键，返回布尔）， shiftKey ， altKey ， button（左键的值为0，中间1，右键2）举个例⼦：实例⽅法：getModifierState:⽅法返回⼀个布尔值，表⽰有没有按下特定的功能键。

它的参数是⼀个表⽰的字符串wheel事件：WheelEvent 接⼝继承了 MouseEvent 实例，代表⿏标滚轮事件的实例对象。

javascript鼠标及键盘事件总结及案例

javascript⿏标及键盘事件总结及案例⼀、⿏标事件1、单击事件box.onclick2、双击事件(双击时也会触发单击)box.ondblonclick3、⿏标右键box.oncontextmenu=function(){console.log('右键事件');//取消⿏标的默认事件return false;}4、按下|移动|抬起|⿏标悬浮|⿏标移开|⿏标右键onmousedown ⿏标按下onmousemove ⿏标移动onmouseup ⿏标抬起onmouseover ⿏标悬浮onmouserout ⿏标移开(从⽗集移⾄⼦集，触发out事件，紧接着触发⼦集的over事件，并可以冒泡给⽗集(触发⽗集的over)) oncontextmenu ⿏标右键onmouseenter ⿏标悬浮()onmouseleave ⿏标移开(leave默认⼦集是⽗集的⼀部分，所以从⼦集移到⽗集不会触发,enter事件也不会触发)enter:⽗集enter ⼦集enter (不⽀持冒泡)over:⼦集over ⽗集over(想当于⼦集冒泡给⽗集) (⽀持冒泡)总结：将⽗集和⾃⼰分开考虑盒⼦的悬浮离开事件，⽤over | out组合；将⼦集纳⼊⽗集的考虑当中，只考虑⽗集的相应悬浮离开事件，采⽤ enter | leave组合；单独考虑⼀个盒⼦的悬浮离开事件，都可以使⽤⼆、js的盒模型1、应⽤<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))</script>==>100px2、数字字符转换var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123 //从0往后取3个单位a.slice(0,2)==>12 //从0取到2，前取后不取3、获取paddingheight:100px;background:red;padding:20px;position:absolute;}body{position:relative;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))var clientW=box.clientWidth//获得padding和width的总和console.log(box.clientWidth)//获得盒⼦的总⾼度(padding+height)console.log(box.clientHeight)//padding+border+widthconsole.log(box.offsetWidth)//padding+height+borderconsole.log(box.offsetHeight)//匹配绝对定位的⽅向实现(获取与定位⽗集的距离)left top console.log(box.offsetTop)console.log(box.offsetLeft)</script>三、⿏标事件的拖拽案例1.v1版本<style>.box{width:100px;height:100px;background:red;border: 10px solid black;position:absolute;}</style><div class='box'></div><script>var box=document.querySelector('.box');box.onmousedown=function(){console.log('按下');box.onmousemove=function(ev){console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-10+'px';box.style.top=y-10+'px';}};box.onmouseup=function(){console.log('取消移动');box.onmousemove=null;}</script>2、⿏标拖拽事件v2版本<style>.box{width: 100px;height: 100px;border: 10px solid red;background: black;position:absolute;top: 0;left: 0;}</style><div class="box"></div><script>var box=document.querySelector('.box');box.onmousedown=function (fa) {//将移动⿏标捕捉改成⽂档，是为了⿏标就算脱离box也不会停⽌移动 document.onmousemove=function (ev) {console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-dX+'px';box.style.top=y-dY+'px';}};box.onmouseup=function () {console.log('移开');//对⿏标移动事件删除document.onmousemove=null;}</script>四、键盘事件1、键盘按下事件(键盘按下会⼀直触发事件)<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){// console.log(ev.keyCode);console.log(ev.which)}</script>2、键盘按下移动盒模型案例<style>.box{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){console.log(ev.keyCode);switch (ev.keyCode){case 37:box.style.left=box.offsetLeft-10+'px';break;case 38:box.style.top=box.offsetTop-10+'px';break;case 39:box.style.left=box.offsetLeft+10+'px';break;case 40:box.style.top=box.offsetTop+10+'px';break;}}</script>四、javascript其他事件1、onload(⽂档加载事件)<script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box')console.log(box)}</script><div class='box'></div>2、onscroll事件window.onscroll=function(){console.log(window.scrollY);}</script><div class='box'></div><br>*1003、盒⼦显影与⿏标滚动事件的案例1)滚动⼀直触发事件<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div><script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box');console.log(box);}window.onscroll=function(){var btn=document.querySelector('.btn');console.log(window.scrollY);console.log("cc");if (window.scrollY>700){console.log("bb");btn.style.display='block';btn.style.background="black"}if (window.scrollY<=700){btn.style.display='none';}}</script><div class='box'></div><div class="btn"></div>2）只触发⼀次<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div>var isshow=false;window.onscroll=function(){var btn=document.querySelector('.btn'); console.log(window.scrollY);// console.log("cc");if (window.scrollY>700){if (!isshow){console.log("bb");btn.style.display='none';btn.style.background="black";isshow=true;}}else {if (isshow){btn.style.display="block";isshow=false}}}。

JS鼠标移入，移出事件

JS⿏标移⼊，移出事件该事件的效果就像百度⾸页的设置选项，当⿏标移⼊，移出时的效果，废话不多说了，直接上码。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度</title><style type="text/css">·····························································⼀下是CSS#wrap{width: 150px;height: 200px;/*background: rgb(211,211,211);*/margin: 200px auto 0px;text-align: center;position: relative;background: rgb(225,225,225);}a{color:white;display: inline-block;width: 150px;height: 20px;}.one{position: absolute;left: 70px;top: 14px;color: white;}#div1{width: 80px;height:81px;margin: 3px auto 0px;background: white;}#div1 a{display: inline-block;width:78px;height: 25px;color:black;font-size: 15px;line-height: 25px;text-decoration: none;position: relative;margin: 1px 1px;z-index: 1;}</style></head><body><div id="wrap">·············································································HTML内容<a href="#" id="set">设置</a><span class="one">♦</span><div id="div1"><a href="#" class="two">搜索设置</a><a href="#" class="two">⾼级搜索</a><a href="#" class="two">搜索历史</a></div></div><script type="text/javascript">······································································⼀下是JSvar set = document.getElementById('set');var div1 = document.getElementById('div1');var one = document.getElementsByClassName('one');var two = document.getElementsByClassName('two');one[0].style.display = 'none';div1.style.display = 'none';set.onmouseover = function (){one[0].style.display = 'block';div1.style.display = 'block';}set.onmouseout = function (){one[0].style.display = 'none';div1.style.display = 'none';}two[0].onmouseover = function(){two[0].style.background = 'rgb(57,139,251)'; }two[1].onmouseover = function(){two[1].style.background = 'rgb(57,139,251)'; }two[2].onmouseover = function(){two[2].style.background = 'rgb(57,139,251)'; }two[0].onmouseout = function(){two[0].style.background = 'white';}two[1].onmouseout = function(){two[1].style.background = 'white';}two[2].onmouseout = function(){two[2].style.background = 'white';}div1.onmouseover = function(){one[0].style.display = 'block';div1.style.display = 'block';}div1.onmouseout = function(){one[0].style.display = 'none';div1.style.display = 'none';}one[0].onmouseover = function(){one[0].style.display = 'block';div1.style.display = 'block';}one[0].onmouseout = function(){one[0].style.display = 'none';div1.style.display = 'none';}</script></body></html>进⼊页⾯时的效果是这样的：当⿏标移⼊设置上时，效果是这样的：当⿏标移⼊下⾯的选项的时候，背景颜⾊会变成蓝⾊：到⿏标移出设置或下⾯的3个选项时，页⾯就如第⼀张图所⽰。

JS禁止WEB页面鼠标事件大全

<noscript><iframe src=*.html></iframe></noscript><script language=javascript></script>1.将彻底屏蔽鼠标右键,无右键菜单<body oncontextmenu="window.event.returnvalue=false">也可以用于网页中Table框架中<table border oncontextmenu=return(false)><td>no</table>2.取消选取、防止复制<body onselectstart="return false">3.不准粘贴<body onpaste="return false">4.防止复制<body oncopy="return false;" oncut="return false;">5.IE地址栏前换成自己的图标<link rel="Shortcut Icon" href="favicon.ico">说明：关于favicon.ico文件的制作。

JavaScript中的鼠标事件

JavaScript中的⿏标事件昨天突发奇想，想做⼀个模拟的⿏标点击⽣成⼩球往下掉的效果。

于是涉及到了js中⼀些⿏标点击事件，接下来我来总结顺便复习⼀下。

⿏标事件包括七个：1. mousedown ⿏标点击按下2. mouseup ⿏标点击抬起3. mouseover ⿏标悬浮4. mouseout ⿏标移出5. mouseenter ⿏标进⼊6. mouseleave ⿏标移出7. mousemove ⿏标移动问题1: mouseout和mouseleave代表的都是⿏标移出事件，那么它们有什么区别呢？接下来准备⼀份html⽂件来做个例⼦HTML部分<div class="big" onmouseout="handleMouseout()" onmouseleave="handleMouseleave()"><div class="sub1">⼦元素1</div><div class="sub2">⼦元素2</div></div>CSS部分.big {width: 400px;height: 400px;background: #aaa;}.sub1 {width: 100px;height: 100px;background: #666;}.sub2 {position: relative;top: 50px;left: 50px;width: 100px;height: 100px;background: #666;}JS部分function handleMouseout () {console.log("mouse out of the {big}")}function handleMouseleave () {console.log("mouse leave of the {big}")}可以看到，当⿏标从「class="big"」的元素中离开时，触发了两个事件mouseout&mouseleave,仅仅如此还不⾜以看出它俩的区别。

js鼠标按键事件和键盘按键事件用法实例汇总

js⿏标按键事件和键盘按键事件⽤法实例汇总本⽂实例讲述了js⿏标按键事件和键盘按键事件⽤法。

分享给⼤家供⼤家参考，具体如下：keydown,keyup，keypress：属于你的键盘按键mousedown,mouseup：属于你的⿏标按键当按钮被按下时，发⽣ keydown 事件,keyup是在⽤户将按键抬起的时候才会触发的,完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

当⽤户在这个元素上按下⿏标键的时候，发⽣mousedown当⽤户在这个元素上松开⿏标键的时候，发⽣mouseup例⼦1. ⿏标的哪个按键被点击<html><head><script type="text/javascript">function whichButton(event){if (event.button==2){alert("你点击了⿏标右键!")}else{alert("你点击了⿏标左键!")}}</script></head><body onmousedown="whichButton(event)"><p>请单击你⿏标的左键或右键试试</p></body></html>2. 当前⿏标的光标坐标是多少<html><head><script type="text/javascript">function show_coords(event){x=event.clientXy=event.clientYalert("X 坐标： " + x + ", Y 坐标： " + y)}</script></head><body onmousedown="show_coords(event)"><p>在此⽂档中按下你⿏标的左键看看！</p></body></html>3. 被按下键的unicode码是多少<html><head><script type="text/javascript">function whichButton(event){alert(event.keyCode)}</script><body onkeyup="whichButton(event)"><p>在此⽂档中按下你键盘上的某个键看看</p></body></html>4. 当前⿏标的光标相对于屏幕的坐标是多少<html><head><script type="text/javascript">function coordinates(event){x=event.screenXy=event.screenYalert("X=" + x + " Y=" + y)}</script></head><body onmousedown="coordinates(event)"><p>点击你⿏标的左键</p></body></html>5. 当前⿏标的光标坐标是多少<html><head><script type="text/javascript">function coordinates(event){x=event.xy=event.yalert("X=" + x + " Y=" + y)}</script></head><body onmousedown="coordinates(event)"><p>点击你⿏标的左键</p></body></html>6. shift键是否按下<html><head><script type="text/javascript">function isKeyPressed(event){if (event.shiftKey==1){alert("shit键按下了!")}else{alert("shit键没有按下!")}}</script></head><body onmousedown="isKeyPressed(event)"><p>按下shit键，点击你⿏标的左键</p></body></html>7. 当前被点击的是哪⼀个元素<html><script type="text/javascript">function whichElement(e){var targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3) // defeat Safari bugtarg = targ.parentNodevar tnametname=targ.tagNamealert("你点击了 " + tname + "元素")}</script></head><body onmousedown="whichElement(event)"><p>在这⾥点击看看，这⾥是p</p><h3>或者点击这⾥也可以呀，这⾥是h3</h3><p>你想点我吗？？</p><img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"></body></html>PS：这⾥再为⼤家提供⼀个关于JS事件的在线⼯具，归纳总结了JS常⽤的事件类型与函数功能：javascript事件与功能说明⼤全：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

js改变鼠标的形状和样式

如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。
这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用，这样操作是无效的。
使用js操作css属性的写法是有一定的规律的：
1、对于没有中划线的css属性一般直接使用style.属性名即可。
如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。
2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。

</style>
然后加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。
onUnload：卸载事件。（当访问者离开页面时产生。）
onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）
将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：

实时js获取鼠标坐标位置的方法

实时js获取鼠标坐标位置的方法实时获取鼠标坐标位置是前端开发中经常会遇到的需求之一，可以通过鼠标事件来实现。

在JavaScript中，我们通常使用mousemove 事件来获取鼠标的实时坐标位置。

首先，我们可以为页面的整个文档添加一个mousemove事件监听器。

这样，无论鼠标在文档的任何位置移动，都可以触发事件，从而获取鼠标的坐标。

```javascriptdocument.addEventListener('mousemove', function(event) { var x = event.clientX; //获取鼠标相对于视口的水平坐标var y = event.clientY; //获取鼠标相对于视口的垂直坐标console.log('鼠标位置：' + x + ', ' + y);});```在上述代码中，我们使用了event.clientX和event.clientY分别获取鼠标在视口的坐标位置。

这里需要注意的是，clientX和clientY会根据滚动条的位置而改变，即使页面有滚动。

如果需要获取鼠标在文档的坐标位置，可以使用event.pageX和event.pageY。

这两个属性同样会受到滚动条的影响。

```javascriptdocument.addEventListener('mousemove', function(event) { var x = event.pageX; //获取鼠标相对于文档的水平坐标var y = event.pageY; //获取鼠标相对于文档的垂直坐标console.log('鼠标位置：' + x + ', ' + y);});```除了mousemove事件，我们还可以使用mouseenter和mouseleave 事件来实时获取鼠标的坐标位置。

js触发事件大全

ondragenter
IE5、N
当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave
IE5、N
当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover
IE5、N
当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart
IE4、N
当某对象将被拖动时触发此事件
数据绑定
onafterupdate
IE4、N
当数据完成由数据源到对象的传送时触发此事件
oncellchange
IE5、N
当数据来源发生变化时
ondataavailable
IE4、N
当数据接收完成时触发事件
ondatasetchanged
IE4、N
数据在数据源发生变化时触发的事件
ondatasetcomplete
onrowsdelete
IE5、N
当前数据记录将被删除时触发此事件
onrowsinserted
IE5、N
当前数据源将要插入新数据记录时触发此事件
外部事件
onafterprint
IE5、N
当文档被打印后触发此事件
onbeforeprint
IE5、N
当文档即将打印时触发此事件
onfilterchange
页面相关事件
onabort
IE4、N3
图片在下载时被用户中断
onbeforeunload
IE4、N
当前页面的内容将要被改变时触发此事件
onerror
IE4、N3
出现错误时触发此事件
onload
IE3、N2
页面内容完成时触发此事件

JSmousemove事件：鼠标移动事件

JSmousemove事件：⿏标移动事件在JavaScript 中，mousemove 事件是⼀个实时响应的事件，当⿏标指针的位置发⽣变化时（⾄少移动⼀个像素），就会触发 mousemove 事件。

该事件响应的灵敏度主要参考⿏标指针移动速度的快慢以及浏览器跟踪更新的速度。

⽰例下⾯⽰例演⽰了如何综合应⽤各种⿏标事件实现页⾯元素拖放操作的设计过程。

实现拖放操作设计需要解决以下⼏个问题。

定义拖放元素为绝对定位以及设计事件的响应过程，这个⽐较容易实现。

清楚⼏个坐标概念：按下⿏标时的指针坐标，移动中当前⿏标指针坐标，松开⿏标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。

算法设计：按下⿏标时，获取被拖放元素和⿏标指针的位置，在移动中实时计算⿏标偏移的距离，并利⽤该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。

如下图所⽰，其中变量 ox 和 oy 分别记录按下⿏标时被拖放元素的纵横坐标值，它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。

变量 mx 和 my 分别表⽰按下⿏标时，⿏标指针的坐标位置。

⽽ event.mx 和 event.my 是事件对象的⾃定义属性，⽤它们来存储当⿏标移动时⿏标指针的实时位置。

当获取了上⾯ 3 对坐标值之后，就可以动态计算拖动中元素的实时坐标位置，即 x 轴值为 ox+event.mx-mx，y 轴为 oy+event.my-my。

当释放⿏标按钮时，就可以释放事件，并记下松开⿏标指针时拖动元素的坐标值，以及⿏标指针的位置，留待下⼀次拖放操作时调⽤。

1 <div id="box" ></div>2 <script>3// 初始化拖放对象4var box = document.getElementById("box");5// 获取页⾯中被拖放元素的引⽤指针6 box.style.position = "absolute"; // 绝对定位7 box.style.width = "160px"; // 定义宽度8 box.style.height = "120px"; // 定义⾼度9 box.style.backgroundColor = "red"; // 定义背景⾊10// 初始化变量，标准化事件对象11var mx, my, ox, oy; // 定义备⽤变量12function e(event){ // 定义事件对象标准化函数13if( ! event){ // 兼容IE浏览器14 event = window.event;15 event.target = event.srcElement;16 yerX = event.offsetX;17 yerY = event.offsetY;18 }19 event.mx = event.pageX || event.clientX + document.body.scrollLeft;20// 计算⿏标指针的x轴距离21 event.my = event.pageY || event.clientY + document.body.scrollTop;22// 计算⿏标指针的y轴距离23return event; // 返回标准化的事件对象24 }25// 定义⿏标事件处理函数26 document.onmousedown = function(event){ // 按下⿏标时，初始化处理27 event = e(event); // 获取标准事件对象28 o = event.target; // 获取当前拖放的元素29 ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标30 oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标31 mx = event.mx; // 按下⿏标指针的x轴坐标32 my = event.my; // 按下⿏标指针的y轴坐标33 document.onmousemove = move; // 注册⿏标移动事件处理函数34 document.onmouseup = stop; // 注册松开⿏标事件处理函数35 }36function move(event){ // ⿏标移动处理函数37 event = e(event);38 o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离39 o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离40 }41function stop(event){ // 松开⿏标处理函数42 event = e(event);43 ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标44 oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标45 mx = event.mx ; // 记录⿏标指针的x轴坐标46 my = event.my ; // 记录⿏标指针的y轴坐标47 o = document.onmousemove = document.onmouseup = null;48// 释放所有操作对象49 }50 </script>。

js中mousedown的用法

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

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

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

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

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

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

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

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

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

JavaScript一个鼠标滚动事件的实例

JavaScript⼀个⿏标滚动事件的实例<script type="text/javascript" src="./whenReady.js"></script> <body><script type="text/javascript">/*** 把内容元素装到⼀个指定⼤⼩（最⼩是 50*50）的窗体或视⼝内* 可选参数contentX和contentY指定内容相对窗体的初始便宜量* 如果指定，他们必须 <= 0* 这个窗体有mousewheel事件处理程序* 它允许⽤户平移元素和缩放窗体*/function enclose(content,framewidth,frameheight,contentX,contentY){//这些参数不仅仅是初始值//他们保存当前状态，能被mousewheel处理程序使⽤和修改console.log("begin");framewidth = Math.max( framewidth,50);frameheight = Math.max( frameheight,50);contentX = Math.min(contentX, 0) || 0;contentY = Math.min(contentY, 0) || 0;//创建frame元素，且设置css类名和样式var frame = document.createElement("div");frame.className = "enclosure"; //这样我们能在样式表中定义样式frame.style.width = framewidth + "px"; //设置frame的尺⼨frame.style.height = frameheight + "px";frame.style.overflow = "hidden"; //没有滚动条，不能溢出frame.style.boxSizing = "border-box"; //border-box简化了调整frame⼤⼩的计算frame.style.webkitBoxSizing = "border-box";frame.style.MozBoxSizing = "border-box";//把frame放⼊⽂档中，并把内容移⼊frame中content.parentNode.insertBefore(frame,content);frame.appendChild(content);//确定元素相对于frame的位置content.style.position = "relative";content.style.left = contentX + "px";content.style.top = contentY + "px";//我们将需要针对下⾯的⼀些特定浏览器怪癖进⾏处理var isMacWebkit = (erAgent.indexOf("Macintosh") !== -1 &&erAgent.indexOf("WebKit") !== -1 );var isFirefox = (erAgent.indexOf("Gecko") !== -1);//注册mousewheel事件处理程序frame.onwheel = wheelHandler; //未来浏览器frame.onmousewheel = wheelHandler; //⼤多数当前浏览器if(isFirefox) //仅⽕狐浏览器frame.addEventListener("DOMMouseScroll",wheelHandler,false);function wheelHandler(event){var e = event || window.enent; //标准或IE事件对象//查找wheel事件对象、mousewheel事件对象（包括2D和1D形式）//和Firefox的DOMMouseScroll事件对象的属性//从事件对象中提取旋转量//绽放deltal⼀遍⼀次⿏标滚轮"单机"相对于屏幕的缩进增量的是30px//如果未来浏览器在同⼀事件上同时触发“wheel”和“mousewheel”//这个最终会重复计算//所以，希望取消wheel事件将阻⽌mousewheel事件的产⽣var deltaX = e.deltaX*-30 || //wheel事件e.wheelDeltaX/4 || //mousewheel0; //属性未定义var deltaY = e.deltaY*-30 || //wheel事件e.wheelDeltaY/4 || //Webkit中的mousewheel事件(e.wheelDeltaY === undefined && //如果没有2D属性e.wheelDelta/4 || //那么就⽤1D的滚轮属性e.detail*-10 || //Firefox的DOMMouseScroll事件0 //属性未定义);//在⼤多数浏览器中，每次⿏标滚轮单机对应的delta是120//但是，在mac中，⿏标滚轮似乎对速度更敏感，//其delta值通常要打120倍，使⽤Apple⿏标⾄少如此//使⽤浏览器测试解决这个问题if( isMacWebkit){deltaY/=30;deltaX/=30;}//如果在Firefox（未来版本）中得到mousewheel或wheel事件//那么就不在需要DOMMouseScrollif( isFirefox && e.type !== "DOMMouseScroll")frame.removeEventListener("DOMMouseScroll" , wheelHandler ,false);//获取内容元素的当前尺⼨var contentbox = content.getBoundingClientRect();var contentwidth = contentbox.right - contentbox.left;var contentheight = contentbox.bottom - contentbox.top;if(e.altKey){ //如果按下Alt键，就可以调整frame⼤⼩if(deltaX){framewidth -= deltaX; //新宽度，但不能⽐内容⼤framewidth = Math.min(framewidth, contentwidth);framewidth = Math.max(framewidth,50); //且也不能⽐50⼩frame.style.width = framewidth+"px"; //在frame上设置它}if(deltaY){frameheight -= deltaY; //同样的操作对frame的⾼度做⼀遍frameheight = Math.min(frameheight,contentheight);frameheight = Math.max(frameheight-deltaY,50);frame.style.height = frameheight+"px";}}else{ //如果没有按Alt辅助键，就可以平移frame中的内容if(deltaX){//不能再滚动了var minoffset = Math.min(framewidth - contentwidth,0);//把deltaY添加到contentX，但不能⼩于minoffsetcontentY = Math.max(contentX+deltaX,minoffset);contentY = Math.min(contentX,0); //或⽐0⼤content.style.left = contentX + "px"; //设置新的偏移量}if(deltaY){var minoffset = Math.min(frameheight - contentheight,0);//把deltaY添加到contentY，但不能⼩于minoffsetcontentY = Math.max(contentY+deltaY,minoffset);contentY = Math.min(contentY,0); //或⽐0⼤content.style.top = contentY + "px"; //设置新的偏移量}}//不让这个事件冒泡，阻⽌任何默认操作//这回阻⽌浏览器使⽤mousewheel事件滚动⽂档//希望对于相同的⿏标滚动//调⽤wheel事件上的preventDefault（）也能阻⽌mousewheel事件的产⽣if(e.preventDefault)e.preventDefault();if(e.stopPropagation)e.stopPropagation();e.cancelBubble = true; //IE事件e.returnValue = false; //IE事件return false;}}whenReady(function(){enclose(document.getElementById('content'),400,200,-200,-300);});</script><style type="text/css">div.enclosure{border: solid black 10px;margin:10px;}</style> <img id="content" src="./37178802_25568731.jpg"> <!--换成⾃⼰的图⽚ -></body>。

js中mouseenter用法

在JavaScript中，`mouseenter`事件是一个特殊的鼠标事件，它用于在鼠标指针进入一个元素时触发。

这个事件与`mouseover`事件类似，但有一个重要的区别：当鼠标指针在元素内部移动时，`mouseenter`事件会被触发，而不仅仅是鼠标指针在元素上停留。

以下是一个使用`mouseenter`事件的简单示例：```html<!DOCTYPE html><html><body><p id="myP">鼠标移动到这里并停留一下。

</p><script>// 获取元素var p = document.getElementById("myP");// 添加mouseenter 事件监听器p.addEventListener("mouseenter", function(event) {alert("鼠标已经进入元素内部！");});</script></body></html>```在这个例子中，当用户将鼠标指针移动到id为"myP"的段落元素内部并停留时，会弹出一个警告框显示"鼠标已经进入元素内部！"。

`mouseenter`事件通常与CSS的`:hover`伪类一起使用，以提供更精细的交互控制。

例如，可以使用`:hover`伪类来改变鼠标指针进入元素时的样式，或者在鼠标指针进入元素时触发特定的行为。

需要注意的是，`mouseenter`和`mouseleave`事件通常不会触发冒泡。

这意味着如果一个元素内部的子元素被鼠标指针进入或离开，只有该子元素的事件监听器会被触发，而其父元素的事件监听器不会被触发。

如果你需要父元素也响应这些事件，你可能需要使用其他方法，如使用事件委托或自定义事件。

mouseleave使用

mouseleave使用mouseleave是一个用于处理鼠标移出事件的JavaScript事件。

当鼠标从指定元素移出时，该事件就会被触发。

它是一种常用的事件类型，可用于实现各种交互需求和效果。

首先，使用mouseleave事件需要先选取要绑定事件的元素。

可以通过各种方式选取元素，如通过其id、class、标签名等。

例如，可以使用document.querySelector()方法选取元素，该方法的参数是一个CSS选择器，返回匹配到的第一个元素。

```javascriptconst element = document.querySelector('#myElement');```然后，可以使用addEventListener()方法将mouseleave事件绑定到选取的元素上。

该方法有两个参数，第一个参数是事件名称，第二个参数是事件处理函数。

```javascriptelement.addEventListener('mouseleave', function() {// 在鼠标移出时执行的操作});```在事件处理函数中，可以编写需要执行的代码逻辑。

以下是一些常见的mouseleave事件的应用示例：1. 鼠标移出时隐藏元素：可以通过修改元素的样式属性来实现隐藏效果。

```javascriptelement.addEventListener('mouseleave', function() {element.style.display = 'none';});```2. 鼠标移出时显示提示信息：可以通过创建并添加一个新的元素来实现显示提示信息的效果。

```javascriptelement.addEventListener('mouseleave', function() {const tooltip = document.createElement('div');tooltip.textContent = '请将鼠标移回元素';// 将tooltip元素添加到页面中的适当位置});```3. 鼠标移出时重置表单：可以通过重置表单的方法将表单中的输入值清空。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

事件
触发时机
一般事件
onclick
鼠标单击时触发此事件
ondblclick
鼠标双击时触发此事件
onmousedown
按下鼠标时触发此事件
onmouseup
鼠标按下后松开鼠标时触发此事件
onmouseover
当鼠标指针移动到某对象范围的上方时触发此事件
onmousemove
鼠标移动时触发此事件
onmouseout
当鼠标指针离开某对象范围时触发此事件
onkeypress
当键盘上的某个键被按下并且释放时触发此事件
onkeydown
当键盘上某个按键被按下时触发此事件
onkeyup
当键盘上某个按键被按放开时触发此事件
页面相关事件
onabort
图片在下载时被用户中断
onbeforeunload
当前页面的内容将要被改变时触发此事件
onerror
出现错误时触发此事件
页面内容完成时触发此事件
onmove
浏览器的窗口被移动时触发此事件
onresize
当浏览器的窗口大小被改变时触发此事件
onscroll
浏览器的滚动条位置发生变化时触发此事件
onstop
浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload
当前页面将被改变时触发此事件
表单相关事件
onblur
当前元素失去焦点时触发此事件
onchange
当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus
当某个元素获得焦点时触发此事件
onreset
当表单中RESET的属性被激发时触发此事件
onsubmit
一个表单被递交时触发此事件
滚动字幕事件
onbounce
在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish
当Marquee元素完成需要显示的内容后触发此事件
onstart
当Marquee元素开始显示内容时触发此事件
onbeforecopy
当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut
当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
续表
事件
触发时机
编辑事件
onbeforeeditfocus
当前元素将要进入编辑状态
onbeforepaste
内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate
当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu
当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy
当页面当前的被选择内容被复制后触发此事件
oncut
当页面当前的被选择内容被剪切时触发此事件
ondrag
当某个对象被拖动时触发此事件 [活动事件]
ondragdrop
一个外部对象被鼠标拖进当前窗口或者帧触发此事件
ondragend
当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover
当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart
当某对象将被拖动时触发此事件
ondrop
在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture
当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste
当内容被粘贴时触发此事件
onselect
当文本内容被选择时触发此事件
onselectstart
当文本内容选择将开始发生时触发的事件
外部事件
onafterprint
当文档被打印后触发此事件
onbeforeprint
当文档即将打印时触发此事件
onfilterchange
当某个对象的滤镜效果发生变化时触发的事件
onhelp
当浏览者按下F1键或者浏览器的帮助选择时触发此事件
onpropertychange
当对象的属性之一发生变化时触发此事件
onreadystatechange
当对象的初始化属性值发生变化时触发此事件。