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鼠标事件为网页开发者提供了一系列
极其有用的功能,可以给网页带来更好的用户体验。

鼠标事件大全

鼠标事件大全
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 当某对象将被拖动时触发的事件

移动端jstouch事件

移动端jstouch事件

移动端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 控制鼠标事件防抖的方法

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鼠标移动、鼠标按下、鼠标释放和点击事件。

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中鼠标点击、移动和光标移动的事件触发

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

但是系统按钮(例如:箭头键、功能键)⽆法得到识别。

mousemove事件用法

mousemove事件用法MouseMove事件是一种常用的用户界面编程技术,它用于当把鼠标移动到特定Web元素(例如图像、文本框等)上时,能够触发某种形式的代码,以实现用户与Web页面的交互。

它的用途多样,可以用来在界面的不同地方显示提示文字,可以用来检测鼠标移动次数,也可以用来在鼠标移入和移出特定元素时触发不同的JavaScript代码。

MouseMove事件最常见的用法是当鼠标移动到一个特定的Web元素上时,触发某种代码来改变它的样式和内容。

例如,当用户将鼠标悬停在图像上时,可以触发一段JavaScript代码来实现图像放大效果,以增加用户体验。

同样,可以通过MouseMove事件为文本框设置一个改变文本框背景颜色的效果,让用户可以更清晰的看到输入处。

此外,MouseMove事件还可以用于检测鼠标移动次数。

当用户一次只在一个特定Web元素上移动鼠标一次时,JavaScript代码可以触发一个计数器,从而记录用户鼠标移动的次数,并在特定的时间内统计出用户的页面浏览行为。

这种功能在用户研究中很有用,可以让研究人员更加深入地了解用户的行为习惯。

另外,MouseMove事件还可以在鼠标移入和移出特定元素时触发不同的JavaScript代码,从而实现诸如显示弹出窗口、自动键入文本等功能。

除了MouseMove事件,还有其他与鼠标关联的事件,如MouseEnter、MouseLeave等,可以实现不同的效果。

总之,MouseMove事件是一种常用的用户界面编程技术,它可以让程序员更好地控制和实现鼠标操作的不同效果。

它的应用涉及到用户界面交互、鼠标移动次数检测、鼠标移入和移出特定元素时触发不同的JavaScript代码等大量的内容,可以在不改变原有用户体验的前提下提升Web页面的可用性和用户研究的深度。

当然,MouseMove 事件的应用还有很多,未来可能会有更多更复杂的应用场景,它们将会进一步提高用户对Web应用的使用体验。

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事件详解-0-1-2级模型

事件(上)(不好意思,又是标题党)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事件对象是用来记录一些事件发生时的相关信息的对象。

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

JS鼠标事件大全.txt52每个人都一条抛物线,天赋决定其开口,而最高点则需后天的努力。

没有秋日落叶的飘零,何来新春绿芽的饿明丽?只有懂得失去,才会重新拥有。

一般事件
事件浏览器支持描述
onClick IE3|N2|O 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件
onMouseDown IE4|N4|O 鼠标上的按钮被按下了
onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件
onMouseOver IE3|N2|O 当鼠标移动到某对象范围的上方时触发的事件onMouseMove IE4|N4|O 鼠标移动时触发的事件
onMouseOut IE4|N3|O 当鼠标离开某对象范围时触发的事件
onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件浏览器支持描述
onAbort IE4|N3|O3 图片在下载时被用户中断
onBeforeUnload IE4|N|O3 当前页面的内容将要被改变时触发的事件onError IE4|N3|O3 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
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>中加入就可禁止使用鼠标右键了] 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 当对象的初始化属性值发生变化时触发的事件。

相关文档
最新文档