javascript js 鼠标事件 大全,js鼠标拖动事件,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鼠标事件为网页开发者提供了一系列
极其有用的功能，可以给网页带来更好的用户体验。
js鼠标事件大全-Javascript鼠标事件大全
onDragLeave IE5NO 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver IE5NO 当某被拖动的对象在另一对象容器范围内拖动时触发的事件
onDrag IE5NO 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop IEN4O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd IE5NO 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onKeyUp IE4N4O 当键盘上某个按键被按放开时触发的事件[注意页面内必须有被聚焦的对象]
页面相关事件
事件 浏览器支持 描述
onAbort IE4N3O3 图片在下载时被用户中断
onBeforeUnload IE4NO3 当前页面的内容将要被改变时触发的事件
onMouseDown IE4N4O 鼠标上的按钮被按下了
onMouseUp IE4N4O 鼠标按下后，松开时激发的事件
onMouseOver IE3N2O 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove IE4N4O 鼠标移动时触发的事件
onHelp IE4NO 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange IE5NO 当对象的属性之一发生变化时触发的事件
onReadyStateChange IE4NO 当对象的初始化属性值发生变化时触发的事件
onContextMenu IE5NO 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的body中加入就可禁止使用鼠标右键了]
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——各种事件⿏标事件⿏标事件指与⿏标相关的事件（滚轮），继承了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 实例，代表⿏标滚轮事件的实例对象。
常用鼠标事件
表 3 其他事件 事件 onfocus onblur onload onunLoad onselect onchange onerror onsubmit onreset onabort 意义 焦点到一个对象上 从一个对象失去焦点 载入网页文档 卸载网页文档 文本框中选择了文本内容 文字变化或列表选项变化 出错 提交表单 重置表单 中断显示图片
JavaScript 常用事件如下:
表 1 常用鼠标事件 事件 onmousedown onmousemove onmouseout onmouseover onmouseup onclick ondbclick 按下鼠标键 移动鼠标 鼠标离开某一个网页对象 鼠标移动到某一个网页对象 松开鼠标键 单击鼠标键 双击鼠标键 意义
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}}}。
JavaScript一个鼠标滚动事件的实例
JavaScript⼀个⿏标滚动事件的实例<script type="text/javascript" src="./whenReady.js"></script> <!-- 使⽤了whenReady⽂件中的函数 --><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鼠标移入，移出事件
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个选项时，页⾯就如第⼀张图所⽰。
JavaScript中的事件处理和DOM操作技巧
JavaScript中的事件处理和DOM操作技巧一、事件处理的基本概念与方法JavaScript中的事件处理是指对网页中的各种交互事件进行响应和处理的技术。
常见的事件包括点击、鼠标移动、键盘按下等。
以下是几个常用的事件处理方法：1.1 onclick事件处理onclick事件是最常用的一种事件，它会在用户点击元素时触发相应的操作。
例如，我们可以通过以下代码给一个按钮添加点击事件处理：```javascriptvar btn = document.getElementById("myButton");btn.onclick = function() {// 点击按钮后执行的操作};```1.2 onmouseover和onmouseout事件处理这两个事件分别在鼠标移入和移出元素时触发，可以用来实现一些与鼠标交互相关的效果。
例如，下面的代码会让一个元素在鼠标移入时背景颜色变为红色，在鼠标移出时恢复原来的颜色：```javascriptvar element = document.getElementById("myElement");element.onmouseover = function() {// 鼠标移入时执行的操作this.style.backgroundColor = "red";};element.onmouseout = function() {// 鼠标移出时执行的操作this.style.backgroundColor = "";};```1.3 addEventListener方法除了上述直接赋值方式外，还可以使用addEventListener方法来添加事件处理。
该方法接受三个参数，分别是事件名称、回调函数和是否在捕获阶段触发。
例如，下面的代码会在点击按钮时执行相应的操作：```javascriptvar btn = document.getElementById("myButton");btn.addEventListener("click", function() {// 点击按钮后执行的操作});```二、事件对象与事件传播在事件处理过程中，事件对象和事件传播是两个重要的概念。
js鼠标事件大全
一般事件事件浏览器支持描述onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick 鼠标双击事件onMouseDown 鼠标上的按钮被按下了onMouseUp 鼠标按下后，松开时激发的事件onMouseOver 当鼠标移动到某对象范围的上方时触发的事件onMouseMove 鼠标移动时触发的事件onMouseOut 当鼠标离开某对象范围时触发的事件onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件事件浏览器支持描述onAbort 图片在下载时被用户中断onBeforeUnload 当前页面的内容将要被改变时触发的事件onError 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误onLoad 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成onMove 浏览器的窗口被移动时触发的事件onResize 当浏览器的窗口大小被改变时触发的事件onScroll 浏览器的滚动条位置发生变化时触发的事件onStop 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload 当前页面将被改变时触发的事件表单相关事件事件浏览器支持描述onBlur 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]onChange 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]onFocus 当某个元素获得焦点时触发的事件onReset 当表单中RESET的属性被激发时触发的事件onSubmit 一个表单被递交时触发的事件滚动字幕事件事件浏览器支持描述onBounce 在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish 当Marquee元素完成需要显示的内容后触发的事件onStart 当Marquee元素开始显示内容时触发的事件编辑事件事件浏览器支持描述onBeforeCopy 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus 当前元素将要进入编辑状态onBeforePaste 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate 当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]onCopy 当页面当前的被选择内容被复制后触发的事件onCut 当页面当前的被选择内容被剪切时触发的事件onDrag 当某个对象被拖动时触发的事件 [活动事件]onDragDrop 一个外部对象被鼠标拖进当前窗口或者帧onDragEnd 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter 当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]onDragStart 当某对象将被拖动时触发的事件onDrop 在一个拖动过程中，释放鼠标键时触发的事件onLoseCapture 当元素失去鼠标移动所形成的选择焦点时触发的事件onPaste 当内容被粘贴时触发的事件onSelect 当文本内容被选择时的事件onSelectStart 当文本内容选择将开始发生时触发的事件数据绑定事件浏览器支持描述onAfterUpdate 当数据完成由数据源到对象的传送时触发的事件onCellChange 当数据来源发生变化时onDataAvailable 当数据接收完成时触发事件onDatasetChanged 数据在数据源发生变化时触发的事件onDatasetComplete 当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onRowEnter 当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit 当前数据源的数据将要发生变化时触发的事件onRowsDelete 当前数据记录将被删除时触发的事件onRowsInserted 当前数据源将要插入新数据记录时触发的事件外部事件事件浏览器支持描述onAfterPrint 当文档被打印后触发的事件onBeforePrint 当文档即将打印时触发的事件onFilterChange 当某个对象的滤镜效果发生变化时触发的事件onHelp 当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange 当对象的属性之一发生变化时触发的事件onReadyStateChange 当对象的初始化属性值发生变化时触发滚动条事件document.body.scroll(0,document.body.scrollHeight)document.body.scrollBy(0,document.body.scrollHeight)document.body.scrollTo(0,document.body.scrollHeight)document.body.scrollTop=document.body.scrollHeight。
JavaScript常见鼠标事件与用法分析
JavaScript常见⿏标事件与⽤法分析JavaScript ⿏标事件有以下8种mousedown⿏标的键钮被按下。
mouseup⿏标的键钮释放弹起。
click⿏标左键（或中键）被单击。
事件触发顺序是：mousedown -> mouseup -> clickdblclick⿏标左键（或中键）被双击。
事件触发顺序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。
contextmenu弹出右键菜单，它可能是⿏标右键触发的，也可能是键盘的菜单键触发的。
mouseover⿏标移动到⽬标上⽅。
mouseout⿏标从⽬标上⽅移出。
mousemove⿏标在⽬标上⽅移动注意：事件名称⼤⼩写敏感。
若需要监听以上事件，则在事件名的前⾯加个on即可。
事件区别onmouseover、nmouseout：⿏标移动到⾃⾝时候会触发事件，同时移动到其⼦元素⾝上也会触发事件onmouseenter、onmouseleave：⿏标移动到⾃⾝是会触发事件，但是移动到其⼦元素⾝上不会触发事件全局事件对象eventevent.x事件发⽣时⿏标的位置event.y事件发⽣时⿏标的位置button⿏标的哪⼀个键触发的事件⿏标左键1⿏标中键2⿏标右键代码范例123 4 5 6 7 8 9 10 11 12<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); }12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 }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>。
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,仅仅如此还不⾜以看出它俩的区别。
javascript鼠标事件的实例
一、javascript鼠标事件简介javascript作为一种常用的前端编程语言，常常需要与用户进行交互，而鼠标事件便是其中的重要一环。
鼠标事件包括鼠标移动、点击、双击、按下、松开等多种操作，通过监听这些鼠标事件，可以实现页面的动态效果和交互功能。
二、鼠标移动事件1. 鼠标移动事件指的是用户在页面上移动鼠标时触发的事件。
在javascript中，可以通过onmousemove事件监听到鼠标移动的操作。
2. 实例：```javascriptdocument.onmousemove = function(e){// 获取鼠标的横纵坐标var x = e.clientX;var y = e.clientY;console.log('鼠标坐标：' + x + ',' + y);}```三、鼠标点击事件1. 鼠标点击事件指的是用户在页面上点击鼠标时触发的事件。
在javascript中，可以通过onclick事件监听到鼠标点击的操作。
2. 实例：```javascriptdocument.onclick = function(){alert('您点击了页面！')}```四、鼠标双击事件1. 鼠标双击事件指的是用户在页面上双击鼠标时触发的事件。
在javascript中，可以通过ondblclick事件监听到鼠标双击的操作。
2. 实例：```javascriptdocument.ondblclick = function(){alert('您双击了页面！')}```五、鼠标按下事件1. 鼠标按下事件指的是用户在页面上按下鼠标时触发的事件。
在javascript中，可以通过onmousedown事件监听到鼠标按下的操作。
2. 实例：```javascriptdocument.onmousedown = function(){console.log('鼠标按下了！')}```六、鼠标松开事件1. 鼠标松开事件指的是用户在页面上松开鼠标时触发的事件。
javascript鼠标事件总结
javascript鼠标事件总结以下是为大家整理的javascript鼠标事件总结的相关范文，本文关键词为javascript,鼠标,事件,总结,常见,以下,8个,m，您可以从右上方搜索框检索更多相关文章，如果您觉得有用，请继续关注我们并推荐给您的好友，您可以在教育文库中查看更多范文。
常见的有以下8个：mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dblclick：鼠标的键钮被按下。
contextmenu：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标在目标的上方移动。
mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown=>mouseup=>click。
因此一个点击事件，通常会激发几个鼠标事件。
请在这里点击，测试一个点击到底捆绑了多少种鼠标事件？！[ctrl+A全选提示:你可先修改部分代码,再按运行]有了它们，我们可以做许多事，但对于高层次的应用（如游戏）是显然不够的，于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。
在Dom2.0中，w3c对鼠标事件作了现范，鼠标事件被解析为mouseevent（我们可以用e.constructor==mouseevent来判断其是否为鼠标事件，是左键点击还是右键点击由它的一个叫button 的属性判定。
以下就是w3c的标准现范：0：按下左键1：按下中键（如果有的话）2：按下右键当然微软是不会妥协的，因为e.button本来就是微软最先实现的，网景用的是e.which，但相对而言，微软的复杂多了。
0：没有键被按下1：按下左键2：按下右键3：左键与右键同时被按下4：按下中键5：左键与中键同时被按下6：中键与右键同时被按下7：三个键同时被按下更详细的情况见下表。
ge:gecko;sA:safari;op:opera;ns:netscapeIens4ge≥1.0sA3op≥8.0ge0.9op e.button左键1undefined011中键4undefined123右键2undefined232e.which左键undefined1111中键undefined2223右键undefined3332为此我们可以使用以下函数来绑定左右键。
js鼠标事件大全
J S鼠标事件大全o n M o u s e O v e r I E3|N2|O3当鼠标移动到某对象范围的上方时触发的事件o n M o u s e M o v e I E4|N4|O鼠标移动时触发的事件o n M o u s e O u t I E4|N3|O3当鼠标离开某对象范围时触发的事件o n K e y P r e s s I E4|N4|O当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]o n K e y D o w n I E4|N4|O当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]o n K e y U p I E4|N4|O当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件 事件 浏览器支持 描述o n A b o r t I E4|N3|O图片在下载时被用户中断o n B e f o r e U n l o a d I E4|N|O当前页面的内容将要被改变时触发的事件o n E r r o r I E4|N3|O捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误o n L o a d I E3|N2|O3页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成o n M o v e I E|N4|O浏览器的窗口被移动时触发的事件o n R e s i z e I E4|N4|O当浏览器的窗口大小被改变时触发的事件o n S c r o l l I E4|N|O浏览器的滚动条位置发生变化时触发的事件o n S t o p I E5|N|O浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断o n U n l o a d I E3|N2|O3当前页面将被改变时触发的事件表单相关事件 事件 浏览器支持 描述o n B l u r I E3|N2|O3当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]o n C h a n g e I E3|N2|O3当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]o n F o c u s I E3|N2|O3当某个元素获得焦点时触发的事件o n R e s e t I E4|N3|O3当表单中R E S E T的属性被激发时触发的事件o n S u b m i t I E3|N2|O3一个表单被递交时触发的事件滚动字幕事件 事件 浏览器支持 描述o n B o u n c e I E4|N|O在M a r q u e e内的内容移动至M a r q u e e显示范围之外时触发的事件o n F i n i s h I E4|N|O当M a r q u e e元素完成需要显示的内容后触发的事件o n S t a r t I E4|N|O当M a r q u e e元素开始显示内容时触发的事件编辑事件 事件 浏览器支持 描述o n B e f o r e C o p y I E5|N|O当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件o n B e f o r e C u t I E5|N|O当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件o n B e f o r e E d i t F o c u s I E5|N|O当前元素将要进入编辑状态o n B e f o r e P a s t e I E5|N|O内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 o n B e f o r e U p d a t e I E5|N|O当浏览者粘贴系统剪贴板中的内容时通知目标对象o n C o n t e x t M e n u I E5|N|O当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<b o d y>中加入o n C o n t e n t M e n u="r e t u r n f a l s e"就可禁止使用鼠标右键了]o n C o p y I E5|N|O当页面当前的被选择内容被复制后触发的事件o n C u t I E5|N|O当页面当前的被选择内容被剪切时触发的事件o n D r a g I E5|N|O当某个对象被拖动时触发的事件 [活动事件]o n D r a g D r o p I E|N4|O一个外部对象被鼠标拖进当前窗口或者帧o n D r a g E n d I E5|N|O当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了o n D r a g E n t e r I E5|N|O当对象被鼠标拖动的对象进入其容器范围内时触发的事件o n D r a g L e a v e I E5|N|O当对象被鼠标拖动的对象离开其容器范围内时触发的事件o n D r a g O v e r I E5|N|O当某被拖动的对象在另一对象容器范围内拖动时触发的事件o n D r a g S t a r t I E4|N|O当某对象将被拖动时触发的事件o n D r o p I E5|N|O在一个拖动过程中，释放鼠标键时触发的事件o n L o s e C a p t u r e I E5|N|O当元素失去鼠标移动所形成的选择焦点时触发的事件o n P a s t e I E5|N|O当内容被粘贴时触发的事件o n S e l e c t I E4|N|O当文本内容被选择时的事件o n S e l e c t S t a r t I E4|N|O当文本内容选择将开始发生时触发的事件数据绑定 事件 浏览器支持 描述o n A f t e r U p d a t e I E4|N|O当数据完成由数据源到对象的传送时触发的事件o n C e l l C h a n g e I E5|N|O当数据来源发生变化时o n D a t a A v a i l a b l e I E4|N|O当数据接收完成时触发事件o n D a t a s e t C h a n g e d I E4|N|O数据在数据源发生变化时触发的事件o n D a t a s e t C o m p l e t e I E4|N|O当来子数据源的全部有效数据读取完毕时触发的事件o n E r r o r U p d a t e I E4|N|O当使用o n B e f o r e U p d a t e事件触发取消了数据传送时，代替o n A f t e r U p d a t e事件o n R o w E n t e r I E5|N|O当前数据源的数据发生变化并且有新的有效数据时触发的事件o n R o w E x i t I E5|N|O当前数据源的数据将要发生变化时触发的事件o n R o w s D e l e t e I E5|N|O当前数据记录将被删除时触发的事件o n R o w s I n s e r t e d I E5|N|O当前数据源将要插入新数据记录时触发的事件数据绑定 事件 浏览器支持 描述o n A f t e r P r i n t I E5|N|O当文档被打印后触发的事件o n B e f o r e P r i n t I E5|N|O当文档即将打印时触发的事件o n F i l t e r C h a n g e I E4|N|O当某个对象的滤镜效果发生变化时触发的事件o n H e l p I E4|N|O当浏览者按下F1或者浏览器的帮助选择时触发的事件o n P r o p e r t y C h a n g e I E5|N|O当对象的属性之一发生变化时触发的事件o n R e a d y S t a t e C h a n g e I E4|N|O当对象的初始化属性值发生变化时触发的事件。
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>。
javascript js 鼠标事件 大全,js鼠标拖动事件,js鼠标移动事件
onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件onMouseMove IE4|N4|O 鼠标移动时触发的事件onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件事件浏览器支持描述onAbort IE4|N3|O 图片在下载时被用户中断onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload IE3|N2|O3 当前页面将被改变时触发的事件表单相关事件事件浏览器支持描述onBlur IE3|N2|O3 当前元素失去焦点时触发的事件[鼠标与键盘的触发均可]onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件[鼠标与键盘的触发均可]onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件onSubmit IE3|N2|O3 一个表单被递交时触发的事件滚动字幕事件事件浏览器支持描述onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件编辑事件事件浏览器支持描述onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件[试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件onDrag IE5|N|O 当某个对象被拖动时触发的事件[活动事件]onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件onDragStart IE4|N|O 当某对象将被拖动时触发的事件onDrop IE5|N|O 在一个拖动过程中，释放鼠标键时触发的事件onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件onPaste IE5|N|O 当内容被粘贴时触发的事件onSelect IE4|N|O 当文本内容被选择时的事件onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件数据绑定事件浏览器支持描述onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件onCellChange IE5|N|O 当数据来源发生变化时onDataAvailable IE4|N|O 当数据接收完成时触发事件onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件数据绑定事件浏览器支持描述onAfterPrint IE5|N|O 当文档被打印后触发的事件onBeforePrint IE5|N|O 当文档即将打印时触发的事件onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件。
JavaScript程序设计(第2版)02.鼠标键盘事件
div1.style.left=x;
//设置层的位置
div1.style.top=y;
div1.style.visibility="visible";
//使层为显示状态
}
</script>
</body>
图6-13 鼠标移动事件的应用
键盘事件
键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘 上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。 Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作 。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键 的操作。
结果如图6-7和图6-8所示。
图6-7 单击按钮前的效果
图6-8 单击按钮后的效果
鼠标移动事件
鼠 用标do移cu动m事en件t对（象on实m时ou读se取m鼠o标ve在）页是面鼠中标的在位页置面。上进行移动时触发事件处理程序，可以在该事件中
， 记将。例通代6过码-层如6 动下下。态面显在示页飞面出中来添的加星一形串标文记字；及自一定个义层函，数自ou定t义()，函当数鼠m标ov移e出()，指当定鼠的标文移字动时到，指隐定藏的星语形句标时
例6-3 下面通过单击“变换背景”按钮，动态的改变页面的背景颜色，当用户再次单击按钮时，页面 背景将以不同的颜色进行显示。程序代码如下:
语法：
<body bgcolor="#FFCC99">
<script language="javascript">
javascript鼠标事件汇总
oncontextmenu
当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy
当页面当前的被选择内容被复制后触发此事件
oncut
当页面当前的被选择内容被剪切时触发此事件
ondrag
当某个对象被拖动时触发此事件[活动事件]
ondragdrop
onbeforecut
当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
续表
事件
触发时机
编辑事件
onbeforeeditfocus
当前元素将要进入编辑状态
onbeforepaste
内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate
onbounce
在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish
当Marquee元素完成需要显示的内容后触发此事件
onstart
当Marquee元素开始显示内容时触发此事件
编辑事件
onbeforecopy
当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件
ondragstart
当某对象将被拖动时触发此事件
ondrop
在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture
当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste
当内容被粘贴时触发此事件
onselect
当文本内容被选择时触发此事件
onselectstart
当文本内容选择将开始发生时触发的事件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick IE4|N4|O 鼠标双击事件
onMouseDown IE4|N4|O 鼠标上的按钮被按下了
onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件onMouseMove IE4|N4|O 鼠标移动时触发的事件
onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件
onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件事件浏览器支持描述
onAbort IE4|N3|O 图片在下载时被用户中断
onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件
onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成onMove IE|N4|O 浏览器的窗口被移动时触发的事件
onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件
onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件
onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload IE3|N2|O3 当前页面将被改变时触发的事件
表单相关事件事件浏览器支持描述
onBlur IE3|N2|O3 当前元素失去焦点时触发的事件[鼠标与键盘的触发均可]
onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件[鼠标与键盘的触发均可]
onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件
onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件
onSubmit IE3|N2|O3 一个表单被递交时触发的事件
滚动字幕事件事件浏览器支持描述
onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件
onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件
编辑事件事件浏览器支持描述
onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态
onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件[试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件
onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件
onDrag IE5|N|O 当某个对象被拖动时触发的事件[活动事件]
onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件onDragStart IE4|N|O 当某对象将被拖动时触发的事件
onDrop IE5|N|O 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste IE5|N|O 当内容被粘贴时触发的事件
onSelect IE4|N|O 当文本内容被选择时的事件
onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件
数据绑定事件浏览器支持描述
onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件
onCellChange IE5|N|O 当数据来源发生变化时
onDataAvailable IE4|N|O 当数据接收完成时触发事件
onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件
onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件
onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件
onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件
数据绑定事件浏览器支持描述
onAfterPrint IE5|N|O 当文档被打印后触发的事件
onBeforePrint IE5|N|O 当文档即将打印时触发的事件
onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件
onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件。