Javascript鼠标触发事件大全

合集下载

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事件

触摸屏的js事件⼀、触摸事件ontouchstartontouchmoveontouchendontouchcancel⽬前移动端浏览器均⽀持这4个触摸事件，包括IE。

由于触屏也⽀持MouseEvent，因此他们的顺序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1/*** onTouchEvent*/var div = document.getElementById("div");//touchstart类似mousedowndiv.ontouchstart = function(e){//事件的touches属性是⼀个数组，其中⼀个元素代表同⼀时刻的⼀个触控点，从⽽可以通过touches获取多点触控的每个触控点//由于我们只有⼀点触控，所以直接指向[0]var touch = e.touches[0];//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientYvar x = touch.clientX;var y = touch.clientY;};//touchmove类似mousemovediv.ontouchmove = function(e){//可为touchstart、touchmove事件加上preventDefault从⽽阻⽌触摸时浏览器的缩放、滚动条滚动等e.preventDefault();};//touchend类似mouseupdiv.ontouchup = function(e){//nothing to do};三、重⼒感应重⼒感应较简单，只需要为body节点添加onorientationchange事件即可。

在此事件中由window.orientation属性得到代表当前⼿机⽅向的数值。

window.orientation的值列表如下：0：与页⾯⾸次加载时的⽅向⼀致-90：相对原始⽅向顺时针转了90°180：转了180°90：逆时针转了90°测试，Android2.1尚未⽀持重⼒感应。

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触发事件的方法JavaScript中，触发事件的方法是非常重要的，它可以让我们在页面上动态响应用户的行为，从而提高我们页面的交互性和用户体验。

在本篇文章中，我们将深入探讨JS触发事件的方法。

一、addEventListener()方法addEventListener()方法是JS中使用最多的事件绑定方法之一，它能够捕获指定事件类型的所有事件，并将它们处理成指定的回调函数。

我们来看一下使用addEventListener()方法的语法：element.addEventListener(event, function, useCapture)参数说明：event：必须。

字符串，表示要接收的事件类型，比如click、mousedown等。

function：必须。

事件触发时执行的回调函数。

useCapture：可选。

Boolean类型，表示是否使用事件捕获模式。

默认情况下为false，即使用事件冒泡模式。

二、onclick()方法onclick()方法是一种特殊的事件触发方法，它只能用于鼠标单击事件。

当鼠标单击元素时，onclick()方法会触发指定的回调函数。

我们来看一下onclick()方法的语法：element.onclick = function;参数说明：function：必须。

事件触发时执行的回调函数。

三、dispatchEvent()方法dispatchEvent()方法是JS中另一种触发事件的方法，它可以模拟任何类型的事件，如鼠标事件、键盘事件等等。

使用dispatchEvent()方法时需要先创建一个Event对象，然后通过dispatchEvent()方法触发该对象。

我们来看一下dispatchEvent()方法的语法：element.dispatchEvent(event)参数说明：event：必须。

Event对象，表示要触发的事件类型。

四、fireEvent()方法在IE浏览器中，我们可以使用fireEvent()方法来触发事件。

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焦点事件、鼠标事件和滚轮事件使用详解

如：
window.onmousemove = function() { clickX = event.clientX; clickY = event.clientY; var div = document.createElement("img"); div.src = "hhh.gif" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
};
页面坐标位置pageX与pageY；
window.onclick = function() { clickX = event.pageX; clickY = event.pageY; var div = document.createElement("img"); div.src = "ppp.png" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
// if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { // return false; // } // return true; // } catch (e) { // return false; // } return false; }

js触发事件大全

js触发事件大全.txt爱情是艺术，结婚是技术，离婚是算术。

这年头女孩们都在争做小“腰”精，谁还稀罕小“腹”婆呀？高职不如高薪，高薪不如高寿，高寿不如高兴。

js 触发事件大全事件浏览器支持解说一般事件onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件onmousemove IE4、N4 鼠标移动时触发此事件onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件.onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件页面相关事件onabort IE4、N3 图片在下载时被用户中断onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件onerror IE4、N3 出现错误时触发此事件onload IE3、N2 页面内容完成时触发此事件onmove IE、N4 浏览器的窗口被移动时触发此事件onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunload IE3、N2 当前页面将被改变时触发此事件表单相关事件onblur IE3、N2 当前元素失去焦点时触发此事件onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus IE3 、N2 当某个元素获得焦点时触发此事件onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件onsubmit IE3 、N2 一个表单被递交时触发此事件滚动字幕事件onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件onstart IE4、 N 当Marquee元素开始显示内容时触发此事件编辑事件onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件onbeforeeditfocusIE5、N 当前元素将要进入编辑状态onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧ondragend IE5、N 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstart IE4、N 当某对象将被拖动时触发此事件ondrop IE5、N 在一个拖动过程中，释放鼠标键时触发此事件onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件onpaste IE5、N 当内容被粘贴时触发此事件onselect IE4、N 当文本内容被选择时的事件onselectstart IE4、N 当文本内容选择将开始发生时触发的事件数据绑定onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件oncellchange IE5、N 当数据来源发生变化时ondataavailable IE4、N 当数据接收完成时触发事件ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件onrowsdelete IE5、N 当前数据记录将被删除时触发此事件onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件外部事件onafterprint IE5、N 当文档被打印后触发此事件onbeforeprint IE5、N 当文档即将打印时触发此事件onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件onreadystatechangeIE4、N 当对象的初始化属性值发生变化时触发此事件。

onmousemove 使用场景

Onmousemove 使用场景1. 引子在网页开发中，我们经常会用到各种 JavaScript 事件来实现与用户的交互。

其中，onmousemove 事件作为鼠标移动事件，在开发中有着广泛的应用。

它能够捕捉到鼠标在页面上的移动，并触发相应的操作。

在本文中，我将深入探讨 onmousemove 事件的使用场景，帮助你更好地理解它的作用和用法。

2. onmousemove 事件概述我们来简单了解一下 onmousemove 事件。

它是一种鼠标事件，当鼠标在页面上移动时就会被触发。

我们可以通过在 HTML 标签中添加onmousemove 事件来绑定相应的 JavaScript 函数，从而实现对鼠标移动的响应和处理。

这个事件可以在任何具有交互性的网页元素上使用，比如按钮、图片、文本框等。

3. onmousemove 的常见应用场景3.1. 鼠标移动特效在网页设计中，我们经常会用到鼠标移动特效来增加页面的交互性和吸引力。

通过监听 onmousemove 事件，我们可以实现一些视觉上的效果，比如鼠标悬停时图片放大、文字变色等。

这种特效能够吸引用户的注意力，提升用户体验。

3.2. 鼠标移动监控在一些需要监控用户行为的场景下，onmousemove 事件也能发挥作用。

比如在游戏开发中，我们可以利用 onmousemove 事件来实时监测玩家鼠标的移动轨迹，从而实现游戏中角色的移动、攻击等操作。

3.3. 鼠标交互操作除了视觉效果和监控功能，onmousemove 事件还可以用于实现鼠标交互操作。

比如拖拽功能，我们可以通过监听鼠标移动事件来实现元素的拖动效果。

又如画板应用，可以根据鼠标的移动轨迹来绘制图形，实现类似手绘的效果。

4. 如何优化 onmousemove 事件当然，虽然 onmousemove 事件有着广泛的应用，但在实际使用中我们也需要注意一些优化策略，比如：4.1. 节流和防抖在处理 onmousemove 事件的过程中，如果触发的频率过高，可能会导致页面性能下降。

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常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件。。。

js常⽤对象：点击、双击、onload事件、⿏标相关、onblur事件和onfocus事件。

1、通过标签内部添加事件（1）onclick事件：单击事件（2）ondbclick事件：双击事件（3）onload事件：只能在body中使⽤，⼊⼝函数⾥有：window. 。

onload=function( ){ }（4）onchange事件：改变事件（5）onblur事件和onfocus事件：失去焦点和聚焦（6）onscroll事件：滚动伦（7）⿏标相关事件：----------------------onmouseover移到对象上⽅是就触发事件，同⼀区域⽆论怎么移动就只触发⼀次----------------------onmouseout⿏标离开对象触发事件调⽤函数----------------------onmousemove移到对象上⽅是就处罚事件调⽤函数同⼀区域⿏标移动⼀次就触发⼀次，⼀般不常⽤----------------------onmouseup⿏标抬起触发事件----------------------onmousedown⿏标按下触发事件电泳函数举例说明：<body><div id="one" onclick="dianji()">点击事件</div><div id="one" ondblclick="shuangji()">双击事件</div>改变事件：<input type="text" id="" name="" value="" placeholder="请输⼊账号" onchange="change()"/><br>失去焦点：<input type="text" id="" name="" value="" placeholder="失去焦点" onblur="sqjd()"/><br>获得焦点：<input type="text" id="" name="" value="" placeholder="获得焦点" onfocus="hdjd()"/><br><div id="mouse" class="mouse1" onmouseover="over()">⿏标移动到某对象范围的上⽅时，触发事件调⽤函数。

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>。

avascript 触发事件

onrowenter 当前数据源的数据发生变化并且有新的有效数据时触发的事件.
onrowexit 当前数据源的数据将要发生变化时触发的事件
onrowsdelete 当前数据记录将被删除时触发的事件
onrowsinserted 当前数据源将要插入新数据记录时触发的事件
16.外部事件
onafterprint 当文档被打印后触发的事件
onstart（）滚动文本条中的文本开始滚动时产生该事件
onsubmit（）提交表单时产生该事件
onunload（）从当前的网页退出时产生该事件
onmouseout（）从网页的某元素移出鼠标时产生该事件
onmouseover（）鼠标移入网页的某元素时产生该事件
onmouseup（）释放按下的鼠标时产生该事件
set（）复位表格时产生该事件
onresize（）改变浏览器时产生该事件
onselect（）选择文本框中的文本时产生该事件
onkeyup 当键盘上某个按键被放开时触发的事件,要求页面内必须有激活对象
11.页面相关事件
onabort 图片在下载时被用户中断
onbeforeunload 当前页面的内容将要被改变时触发的事件
onerror 捕捉当前页面因为某种原因而出现的错误,如脚本错误.
onmove 浏览器的窗口被移动里触发的事件
13.滚动字幕事件
onbounce 当marquee内的内容移动至marquee显示范围之外时触发的事件.
onfinish 当marquee元素完成需要显示的内容后触发的事件.
onstart 当marquee元素开始显示内容时触发的事件.
14.编辑事件.

jquery笔记(6)jQuery事件之鼠标事件

jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。

$('p').click(function(){alert('click function is running !');});(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。

一般双击事件在页面中不经常使用。

$('p').dbclick(function(){alert('dbclick function is running !');});(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。

$('p').mousedown(function(){alert('mousedown function is running !');});(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。

$('p').mouseup(function(){alert('mouseup function is running !');}).click(function(){alert('click function is running too !');});(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。

(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

onmousewheel用法

onmousewheel是一个JavaScript事件，它在鼠标滚轮滚动时触发。

它可以用于监听鼠标滚轮的滚动事件，并执行相应的操作。

使用onmousewheel事件的一般步骤如下：1. 在HTML元素上添加onmousewheel属性，指定要执行的JavaScript代码。

例如：```html<div onmousewheel="myFunction(event)">滚动鼠标滚轮</div>```2. 在JavaScript中定义相应的函数，用于处理鼠标滚轮事件。

例如：```javascriptfunction myFunction(event) {// 获取滚动方向和滚动距离var delta = event.wheelDelta || -event.detail;// 根据滚动方向和距离执行相应的操作if (delta > 0) {// 向上滚动console.log("向上滚动");} else {// 向下滚动console.log("向下滚动");}}```在这个例子中，myFunction函数会在鼠标滚轮滚动时被调用，并根据滚动方向打印相应的信息。

需要注意的是，onmousewheel事件在不同浏览器中的属性名可能有所不同。

在大多数浏览器中，可以使用event.wheelDelta属性来获取滚动方向和滚动距离。

而在Firefox浏览器中，可以使用-event.detail属性来获取相同的信息。

因此，为了兼容不同浏览器，可以使用event.wheelDelta || -event.detail来获取滚动信息。

javascript触发模拟鼠标点击事件

javascript触发模拟⿏标点击事件事件触发器就是⽤来触发某个元素下的某个事件，IE下fireEvent⽅法，⾼级浏览器（chrome,firefox等）有dispatchEvent⽅法。

⼀般我们在元素上绑定事件后，是靠⽤户在这些元素上的⿏标⾏为来捕获或者触发事件的，或者⾃带的浏览器⾏为事件，⽐如click，mouseover，load等等，有些时候我们需要⾃定义事件或者在特定的情况下需要触发这些事件。

这个时候我们可以使⽤IE下fireEvent⽅法，⾼级浏览器（chrome,firefox等）有dispatchEvent⽅法。

例如在ie下看看这个例⼦：//document上绑定⾃定义事件ondataavailabledocument.attachEvent('ondataavailable', function (event) {alert(event.eventType);});var obj=document.getElementById("obj");//obj元素上绑定click事件obj.attachEvent('onclick', function (event) {alert(event.eventType);});//调⽤document对象的createEventObject⽅法得到⼀个event的对象实例。

mouseleave使用

mouseleave使用0. 介绍：在Web开发中，JavaScript是一种常用的脚本语言，用于增强网页的交互性和动态性。

其中，鼠标事件是常用的交互方式之一，可以对用户鼠标的动作进行监听和响应。

其中的mouseleave事件是鼠标离开特定元素时触发的事件。

本文将介绍如何使用mouseleave事件和相关的代码示例。

1. mouseleave事件的定义和作用：mouseleave事件是指鼠标指针离开一个元素的边界时触发的事件。

它与mouseout事件的不同之处在于，mouseleave事件不会冒泡，只有当鼠标指针完全离开元素时才会触发，而mouseout事件则会在鼠标指针从元素内部移动到子元素上时也会触发。

2. mouseleave事件的使用方法：mouseleave事件可以使用addEventListener方法来监听，在监听器中定义处理函数。

下面是一些示例代码：javascriptconst element = document.getElementById("myElement"); element.addEventListener("mouseleave", function() {在鼠标离开元素时执行的代码});在上面的示例中，我们使用getElementById方法获取了id为"myElement"的元素，并给它添加了一个mouseleave事件监听器。

当鼠标离开该元素时，事件监听器中的处理函数将被执行。

3. mouseleave事件的应用场景：mouseleave事件在很多场景下都非常有用。

例如，当用户将鼠标从一个元素上移开时，我们可以通过触发mouseleave事件来改变元素的样式、隐藏或显示其他元素，或执行其他交互操作。

下面是一些具体的应用场景：3.1 改变元素样式：mouseleave事件可以与JavaScript的样式属性一起使用，从而在鼠标离开元素时改变元素的样式。

mouseleave使用 -回复

mouseleave使用-回复mouseLeave 是一个非常实用的JavaScript 事件，它在鼠标离开指定元素时触发。

无论是在网页设计还是在Web 开发中，mouseLeave 都发挥着重要的作用。

在本文中，我们将详细讨论mouseLeave 的用法、特点以及如何在网页中正确应用该事件。

开始之前，让我们先来了解一下mouseLeave 事件的基本知识。

mouseLeave 事件是一种与鼠标交互相关的JavaScript 事件，它会在鼠标离开某个元素时触发。

相较于mouseout 事件，mouseLeave 事件只在鼠标完全离开指定元素时触发，而不会在鼠标移动到元素内部的子元素时触发。

那么，如何正确地使用mouseLeave 事件呢？下面是一些关键步骤：1. 声明JavaScript 功能：在HTML 文件中，首先需要声明一个JavaScript 函数，用于处理mouseLeave 事件的触发。

例如，你可以创建一个名为handleMouseLeave 的函数来处理鼠标离开事件，具体代码如下：javascriptfunction handleMouseLeave() {这里是处理鼠标离开事件的代码}2. 指定触发元素：接下来，你需要在HTML 中指定触发mouseLeave 事件的元素。

你可以使用任何有效的CSS 选择器来选取指定元素。

例如，如果你希望在鼠标离开某个带有id 为"container" 的元素时触发mouseLeave 事件，可以使用以下代码：javascriptconst container = document.querySelector("#container");container.addEventListener("mouseleave", handleMouseLeave);3. 编写事件处理程序：现在，你可以编写handleMouseLeave 函数来处理mouseLeave 事件的触发。

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

Javascript鼠标事件大全
一般事件
事件浏览器支持描述
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 当对象的初始化属性值发生变化时触发的事件。