js鼠标事件有哪些

JavaScript014

js鼠标事件有哪些,第1张

js 鼠标事件详细

常用的几个类型

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当鼠标离开某对象范围时触发的事件

若想检测鼠标左键、右键点击事件可以用

事件button 值来检测

例如

document.onMouseDown =function(ev){

var oEvent = ev||event

alert(oEvent.button)

}

此时button= 0、1、2分别对应于 鼠标左中右

事件流描述的是从页面中接收事件的顺序,IE采用事件冒泡流,标准采用事件捕获流,最后addEventLister给出了第三个参数同时支持冒泡与捕获。

常用的事件主要有:

(1)单击事件:onclick。用户单击鼠标按键时产生的事件,同时。nclick指定的事件处理程序或代码将被调用执行.

(2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。

(3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:

<ipnut type="text" value="默认信息”onselect=alert(”您选中T文本框中的文字”)>

(4)获得焦点事件:onfocus。用户单击text或textarea以及select对象,即光标落在文本框或选择框时会产生该事件。如:

<select name= "zhengjian" onfocus=alert(”我成为焦点”)>

(5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对,当text或textarea以及select对象不再拥有焦点而退出后台时,引发该事件。

(6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中。如:

<body onload=alert(”正在加载页面,请等待一”)>

(7)卸载文件事件:onunload。与载人文件事件。nload正好相反,当Web页面退出时引发的事件,并可更新。ookie的状态。如:

<body onunload=confirm(”你确定要离开本页?”)>

(8)鼠标镇盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:

<input type= "boutton" value=”按钮”onmouseover= "window. status=‘请您注意下面的状态栏·return true">

(9)鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果。

(10)一般事件。

ondbclick:鼠标双击事件。

onkeypress:当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活的对象。

onkeydown:当键盘上某个键被按下时触发的事件,要求页面内必须有激活的对象。

onkeyup:当键盘上某个键被放开时触发的事件,要求页面内必须有激活的对象。

(11)页面相关事件。

onabort:图片在下载时被用户中断时触发的事件。

onbeforeunload:当前页面的内容将要被改变时触发的事件。

Javascript事件处理程序的3种方式

产生了事件,我们就要去处理他,据马海祥了解Javascript事件处理程序主要有3种方式:

1、HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序,如下面这段代码:

<input id="btn1" value="按钮" type="button" onclick="showmsg()">

<script>

function showmsg(){

alert("HTML添加事件处理")

}

</script>

从上面的代码中我们可以看出,事件处理是直接嵌套在元素里头的,这样有一个毛病:就是html代码和js的耦合性太强,如果哪一天我想要改变js中showmsg,那么我不但要再js中修改,我还需要到html中修改,一两处的修改我们能接受,但是当你的代码达到万行级别的时候,修改起来就需要劳民伤财了,所以,这个方式我们并不推荐使用。

2、DOM0级事件处理程序

即为指定对象添加事件处理,看下面的一段代码

<input id="btn2" value="按钮" type="button">

<script>

var btn2= document.getElementById("btn2")

btn2.onclick=function(){

alert("DOM0级添加事件处理")

}

btn.onclick=null//如果想要删除btn2的点击事件,将其置为null即可

</script>

从上面的代码中,我们能看出,相对于HTML事件处理程序,DOM0级事件,html代码和js代码的耦合性已经大大降低。但是,聪明的程序员还是不太满足,期望寻找更简便的处理方式,下面马海祥就来说说第三种处理方法。

3、DOM2级事件处理程序

DOM2也是对特定的对象添加事件处理程序(具体可查看马海祥博客的《JavaScript对象属性的基础教程指南》相关介绍),但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。

它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件),看下面的一段代码:

<input id="btn3" value="按钮" type="button">

<script>

var btn3=document.getElementById("btn3")

btn3.addEventListener("click",showmsg,false)//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处理在各浏览器中兼容性较好

function showmsg(){

alert("DOM2级添加事件处理程序")

}

btn3.removeEventListener("click",showmsg,false)//如果想要把这个事件删除,只需要传入同样的参数即可

</script>