js鼠标事件大全-Javascript鼠标事件大全

格式：txt
大小：5.11 KB
文档页数：3

onDragEnter IE5NO 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
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中加入就可禁止使用鼠标右键了]
onCopy IE5NO 当页面当前的被选择内容被复制后触发的事件
onCut IE5NO 当页面当前的被选择内容被剪切时触发的事件
onDatasetComplete IE4NO 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate IE4NO 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter IE5NO 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onMouseOut IE4N3O 当鼠标离开某对象范围时触发的事件
onKeyPress IE4N4O 当键盘上的某个键被按下并且释放时触发的事件.[注意页面内必须有被聚焦的对象]
onKeyDown IE4N4O 当键盘上某个按键被按下时触发的事件[注意页面内必须有被聚焦的对象]
onPaste IE5NO 当内容被粘贴时触发的事件
onSelect IE4NO 当文本内容被选择时的事件
onSelectStart IE4NO 当文本内容选择将开始发生时触发的事件
数据绑定
事件浏览器支持描述
onRowExit IE5NO 当前数据源的数据将要发生变化时触发的事件
onRowsDelete IE5NO 当前数据记录将被删除时触发的事件
onRowsInserted IE5NO 当前数据源将要插入新数据记录时触发的事件数据绑定事件浏览器支持描述
onAfterPrint IE5NO 当文档被打印后触发的事件
onBeforePrint IE5NO 当文档即将打印时触发的事件
onFilterChange IE4NO 当某个对象的滤镜效果发生变化时触发的事件
onAfterUpdate IE4NO 当数据完成由数据源到对象的传送时触发的事件
onCellChange IE5NO 当数据来源发生变化时
onDataAvailable IE4NO 当数据接收完成时触发事件
onDatasetChanged IE4NO 数据在数据源发生变化时触发的事件
onBeforeEditFocus IE5NO 当前元素将要进入编辑状态
onBeforePaste IE5NO 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate IE5NO 当浏览者粘贴系统剪贴板中的内容时通知目标对象
编辑事件
事件浏览器支持描述
onBeforeCopy IE5NO 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut IE5NO 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onFocus IE3N2O3 当某个元素获得焦点时触发的事件
onReset IE4N3O3 当表单中RESET的属性被激发时触发的事件
onSubmit IE3N2O3 一个表单被递交时触发的事件
滚动字幕事件
onUnload IE3N2O3 当前页面将被改变时触发的事件
表单相关事件
事件浏览器支持描述
onBlur IE3N2O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange IE3N2O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onError IE4N3O3 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad IE3N2O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove IEN4O 浏览器的窗口被移动时触发的事件
js鼠标事件大全-Javascript鼠标事件大全 [转载]2008年03月11日星期二 1040一般事件
事件浏览器支持描述
onClick IE3N2O 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick IE4N4O 鼠标双击事件
事件浏览器支持描述
onBounce IE4NO 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish IE4NO 当Marquee元素完成需要显示的内容后触发的事件
onStart IE4NO 当Marquee元素开始显示内容时触发的事件
onResize IE4N4O 当浏览器的窗口大小被改变时触发的事件
onScroll IE4NO 浏览器的滚动条位置发生变化时触发的事件
onStop IE5NO 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onDragStart IE4NO 当某对象将被拖动时触发的事件
onDrop IE5NO 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture IE5NO 当元素失去鼠标移动所形成的选择焦点时触发的事件

下载文档原格式

/ 3

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事件随着智能⼿机和平板电脑的普及, 越来越多的⼈⽤移动设备浏览⽹页，我们平时在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⿏标移动、⿏标按下、⿏标释放和点击事件。

⿏标移动：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>事件委托：将⼦元素将要执⾏的事件委托给⽗元素，⽗元素执⾏事件时，通过事件对象，来判断是哪个⼦元素触发的事件。

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

HTML鼠标事件

HTML鼠标事件一般事件事件浏览器支持描述onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了onMouseUp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件onMouseOver HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标移动时触发的事件onMouseOut HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件onKeyPress HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]onKeyDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件事件浏览器支持描述onAbort HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N3 | O 图片在下载时被用户中断onBeforeUnload HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当前页面的内容将要被改变时触发的事件onError HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N3 | O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误onLoad HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成onMove HTML: 2 | 3 | 3.2 | 4 Browser: IE | N4 | O 浏览器的窗口被移动时触发的事件onResize HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 当浏览器的窗口大小被改变时触发的事件onScroll HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 浏览器的滚动条位置发生变化时触发的事件onStop HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 当前页面将被改变时触发的事件表单相关事件事件浏览器支持描述onBlur HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] onChange HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]onFocus HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 当某个元素获得焦点时触发的事件onReset HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N3 | O3 当表单中RESET的属性被激发时触发的事件onSubmit HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 一个表单被递交时触发的事件滚动字幕事件事件浏览器支持描述onBounce HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 在Marquee 内的内容移动至Marquee显示范围之外时触发的事件onFinish HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当Marquee 元素完成需要显示的内容后触发的事件onStart HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当Marquee 元素开始显示内容时触发的事件编辑事件事件浏览器支持描述onBeforeCopy HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当前元素将要进入编辑状态onBeforePaste HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件[试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了] onCopy HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当页面当前的被选择内容被复制后触发的事件onCut HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当页面当前的被选择内容被剪切时触发的事件onDrag HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当某个对象被拖动时触发的事件 [活动事件]onDragDrop HTML: 2 | 3 | 3.2 | 4 Browser: IE | N4 | O 一个外部对象被鼠标拖进当前窗口或者帧onDragEnd HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了 onDragEnter HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件 onDragLeave HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]onDragStart HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当某对象将被拖动时触发的事件onDrop HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 在一个拖动过程中，释放鼠标键时触发的事件onLoseCapture HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当元素失去鼠标移动所形成的选择焦点时触发的事件 onPaste HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当内容被粘贴时触发的事件onSelect HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当文本内容被选择时的事件onSelectStart HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当文本内容选择将开始发生时触发的事件数据绑定事件浏览器支持描述onAfterUpdate HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当数据完成由数据源到对象的传送时触发的事件 onCellChange HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当数据来源发生变化时onDataAvailable HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当数据接收完成时触发事件onDatasetChanged HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 数据在数据源发生变化时触发的事件 onDatasetComplete HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当来子数据源的全部有效数据读取完毕时触发的事件 onErrorUpdate HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onRowEnter HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当前数据源的数据将要发生变化时触发的事件 onRowsDelete HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当前数据记录将被删除时触发的事件onRowsInserted HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当前数据源将要插入新数据记录时触发的事件外部事件事件浏览器支持描述onAfterPrint HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当文档被打印后触发的事件onBeforePrint HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当文档即将打印时触发的事件onFilterChange HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当某个对象的滤镜效果发生变化时触发的事件onHelp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当浏览者按下F1或者浏览器的帮助选择时触发的事件 onPropertyChange HTML: 2 | 3 | 3.2 | 4 Browser: IE5 | N | O 当对象的属性之一发生变化时触发的事件 onReadyStateChange HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N | O 当对象的初始化属性值发生变化时触发/yunfan555/article/details/2568437。

JavaScript经典实例

JavaScript经典实例跨浏览器事件跨浏览器添加事件//跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }跨浏览器移除事件//跨浏览器移除事件function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); }}跨浏览器阻⽌默认⾏为//跨浏览器阻⽌默认⾏为 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }跨浏览器获取⽬标对象//跨浏览器获取⽬标对象function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; }}跨浏览器获取滚动条位置//跨浏览器获取滚动条位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.bo 跨浏览器获取可视窗⼝⼤⼩//跨浏览器获取可视窗⼝⼤⼩ function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight }} else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },js 对象冒充<script type = 'text/javascript'>function Person(name , age){ = name ; this.age = age ; this.say = function (){ return "name : "+ + " age: "+this.age ; } ; }var o = new Object() ;//可以简化为Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20</script>js 异步加载和同步加载异步加载也叫⾮阻塞模式加载，浏览器在下载js的同时，同时还会执⾏后续的页⾯处理。

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.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()⽅法⼀样当内容改变时触发。

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触发事件大全

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
页面内容完成时触发此事件

JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

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 给出的其他组合键⼀般⽆法使⽤上。

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

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,页面自动加载事件详解

javaScript,页面自动加载事件详解篇一：javascript 动态添加事件往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。

方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript：alert('测试');"); 这里利用 setAttribute 指定 onclick 属性，简单，很好理解，但是： IE 不支持， IE 并不是不支持 setAttribute 这个函数，而是不支持用 setAttribute 设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。

LEO:在 IE6 下尝试成功方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。

js中mousedown的用法

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

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

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

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

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

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

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

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

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

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来实现鼠标事件的防抖。

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例
document.oncontextmenu = function(){return false}; //禁⽌⿏标右键菜单显⽰
var res = document.getElementById('box'); //找到id为box的div
document.body.onmouseup = function(e){ //在body⾥点击触发事件
if(e.button===2){ //如果button=1（⿏标左键），button=2（⿏标右键），button=0（⿏标中间键）
console.log(e); //将传进去的参数打印出来
console.log(e.offsetY); //打印出⿏标点击的Y轴坐标
console.log(e.offsetX); //打印出⿏标点击的X轴坐标
res.style.top = e.offsetY+'px'; //⿏标点击时给div定位Y轴
res.style.left = e.offsetX+'px'; //⿏标点击时给div定位X轴
res.style.display = 'block'; //显⽰div盒⼦
}else{
res.style.display = 'none'; //否则不显⽰div盒⼦
}
}
以上这篇JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

JavaScript代码模拟鼠标自动点击事件示例

通过css给这些按钮设置宽度高度以及边框的样式以及在页面的正中间的上方显示然后再利用关键帧keyframes考虑到浏览器兼容性的问题可在关键帧前面加上不同的前缀给这些文字设置大小加粗的效果以及添加颜色的变化让文字有一个从消失到隐藏再到消失的一个过程
JavaScript代码模拟鼠标自动点击事件示例
利用JavaScript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后，JavaScript代码会自动去点击下一个按钮，一直点击到按钮5才会停止（可根据实际情况进行相应的调整）。效果图如下所示：
到此这篇关于JavaScript代码模拟鼠标自动点击事件示例的文章就介绍到这了,更多相关JavaScript模拟鼠标自动点击事件内容请搜索以前的文章或继续浏览下面的相vaScript的代码自动点击按钮2，代码点击了按钮2之后又会去点击按钮3，以此类推，直到点击到按钮5为止。
首先先设置几个按钮，然后再设置一个盒子包裹着一些文字，方便我们在接下来js部分中更换里面的内容时，更加直观的看到它的效果。 HTML代码部分：
通过css给这些按钮设置宽度、高度以及边框的样式以及在页面的正中间的上方显示，然后再利用关键帧(@keyframes,考虑到浏览器兼容性的问题，可在关键帧前面加上不同的前缀)给这些文字设置大小、加粗的效果，以及添加颜色的变化，让文字有一个从消失到隐藏再到消失的一个过程。 CSS部分代码：
js部分的代码可写在HTML页面中，也可以自行创建一个js的文件，创建好之后就可以开始写页面加载事件，并且通过ID获取到前面HTML中的样式，再然后就是给按钮1添加点击事件，再在点击事件里面嵌套点击事件，注意：为了避免点击事件过快点击，可以利用定时器setTimeout设置点击事件在多长时间后才会去被触发，然后还可以通过设置变量之后再给定时器赋值（e=setTimeout…）方便后面清除定时器也防止点击事件过快而出现BUG。最后就是通过innerHtml来更换HTML中的文字，可以更加直观的看到按钮切换的效果。 JavaScript代码部分：

【javascriptcss】关于鼠标事件onmousexxx和css伪类hover

【javascriptcss】关于⿏标事件onmousexxx和css伪类hover 在运⽤⿏标移⼊移出事件时，⼀般有两种做法，⼀种是DOM事件的"onmouseover"和"onmouseout"，还有⼀种是css的伪类":hover"。

在实际运⽤中如何选择，取决于清楚明⽩的了解他们之间的区别。

　 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

在我们为元素绑定了⼀个事件，当事件发⽣的时候，可以执⾏⼀段javascript代码。

关于⿏标事件，总共有： onmouseover和onmouseout ⿏标指针移动到或离开元素时触发脚本 onmousedown和onmouseup ⿏标按钮被按下或松开时触发脚本 onclick和ondbclick ⿏标单击和双击时触发脚本 onmousemover ⿏标指针移动时触发脚本⿏标事件的使⽤⽅法⼤同⼩异，即在元素标签内分配事件属性，然后将需要执⾏的javascript代码放置到事件触发的函数内，当我们点击该元素时，就会触发相应javascript代码。

例如：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">2 <html xmlns="/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 <meta http-equiv="Content-Language" content="utf-8" />6 <script type="text/javascript">7function over(obj){8 obj.innerHTML = "进来了";9 obj.style.background = "red";10 }11function out(obj){12 obj.innerHTML = "出去了";13 obj.style.background = "#666";14 }15 </script>16 <style type="text/css">17 #box {18 width: 400px;19 border: 2px solid;20 margin: 200px auto;21 line-height: 100px;22 text-Align: center;23 }24 #img1,#img2 {25 height: 100px;26 margin: 2px;27 background: #ccc;28 }2930 </style>31 <title>opacity</title>32 </head>33 <body>34 <div id="box">35 <div id="img1" onmouseover="over(this)" onmouseout="out(this)">这个是内容1</div>36 <div id="img2">这个是内容2</div>37 </div>38 </body>39 </html> 设⽴了2个相同的块，分别给2个块分配了⿏标指针移动到元素以及移出元素的事件onmouseover和onmouseout。

js on方法

js on方法JS on方法是JavaScript中非常常用的一个方法，它在很多场景下都能发挥重要作用。

本文将详细介绍JS on方法的用法和应用场景，帮助读者更好地理解和应用这个方法。

我们来了解一下JS on方法的基本语法。

它的语法如下所示：```javascriptelement.on(eventName, eventHandler);```其中，element表示需要绑定事件的元素，eventName表示事件的名称，eventHandler表示事件处理函数。

通过调用on方法，我们可以将指定的事件绑定到指定的元素上，当事件触发时，对应的事件处理函数将被调用。

JS on方法可以用于绑定各种类型的事件，比如鼠标点击事件、键盘按下事件、表单提交事件等等。

下面我们将分别介绍几种常见的应用场景。

1. 鼠标点击事件鼠标点击事件是Web开发中最常见的事件之一，通过JS on方法，我们可以轻松地为元素绑定点击事件。

例如，我们可以通过以下代码为一个按钮绑定点击事件：```javascriptlet button = document.querySelector('button');button.on('click', function() {console.log('按钮被点击了');});```2. 键盘按下事件键盘按下事件是处理用户键盘输入的重要事件。

通过JS on方法，我们可以为输入框等元素绑定键盘按下事件，实时响应用户的输入。

例如，我们可以通过以下代码为一个输入框绑定键盘按下事件：```javascriptlet input = document.querySelector('input');input.on('keydown', function(event) {console.log('用户按下了键盘按键', event.keyCode);});```3. 表单提交事件表单提交事件在Web开发中非常常见，它通常用于在用户填写完表单后，将表单数据提交到服务器进行处理。

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

js鼠标事件大全-Javascript鼠标事件大全

页数:3
JS屏蔽大全

页数:9
Javascript综合复习试题大全和答案

页数:18
js鼠标事件

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

页数:6
鼠标事件大全

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

页数:6
jQuery事件大全

页数:11
javascript js 鼠标事件大全,js鼠标拖动事件,js鼠标移动事件

页数:2
js触发事件大全

页数:3