浅谈JavaScript中的事件

来源：互联网发布：骑行用什么软件编辑：程序博客网时间：2024/04/27 17:55

事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针对JavaScript而言)

在开始本文之前,我们先来了解下什么是事件?在一个Web页面中,浏览器有能力调用JavaScript,以响应用户的操作.例如:当用户点击了某个链接或者编辑了表单域中的内容,浏览器就会调用相应的Javascript代码.在此过程中,JavaScript响应的操作就称为事件.好了,基本概念完了,我们接下来来了解JavaScript中的事件模型之一基本事件模型.

这里列出XHTML中的基本事件及其处理器属性

事件属性	事件描述	标准XHTML中支持的元素
onblur	元素失去焦点时触发	大部分可显示的元素
onchange	莫元素失去焦点,并且,从用户最后一次访问以来其值已改变	<input>,<select>,<textarea>
onclick	元素被鼠标单击	大部分可显示元素
ondblclick	元素被鼠标双击	大部分可显示元素
onfocus	元素获得焦点,等待用户下一步的操作或者输入	<a>,<area>,<label>,<select>
onkeydown	在一个已获得焦点的元素上按下鼠标或键盘键	大部分可显示元素
onkeypress	在一个元素上按下并释放鼠标或键盘键时触发.	大部分可显示元素
onkeyup	在一个元素上释放按键	大部分可显示元素
onload	表明某对象已载入窗口	<body>,<frameset>
onmousedown	在元素上按下鼠标键	大部分可显示元素
onmousemove	鼠标移动至元素上方	大部分可显示元素
onmouseout	鼠标移开某个元素	大部分可显示元素
onmouseover	表明鼠标移动过某个元素	大部分可显示元素
onmouseup	表明鼠标键被释放,相应元素会得到焦点	大部分可显示元素
onreset	表明表单被复位,通常用于激活一个复位按钮	<form>
onselect	表明用户选择的文本,通常会高亮显示	<input>,<textarea>
onsubmit	表明一个表单将要被提交	<form>
onunload	表明浏览器已不再导航当前文档,并从窗口或框架中将其卸载	<body>,<frameset>

如何将上述的事件与元素进行绑定呢?其实方式有很多种,如

阅读

编辑

运行

复制

保存

<a href="http://justdi.cnblogs.com" onclick="alert('这种是直接绑定')" >直接绑定</a>

当然这种绑定只适合于一些简单的弹出确认框等方便的响应用户的操作,我们用得更多的是用JavaScript绑定事件处理器进行绑定

阅读

编辑

运行

复制

保存

<html><head><title>使用JavaScript绑定事件处理器</title><script type="text/javascript">function alertsomething()  {     alert("JavaScript");    }</script></head><body><form><input name="myButton" id="myButton" type="button" value="点击这里" onclick="alertsomething()" /></form></body></html>

在IE中还有一种非标准的事件绑定方式,如:

阅读

编辑

运行

复制

保存

<html><head><title>使用JavaScript绑定事件处理器</title></head><body><form><input name="myButton" id="myButton" type="button" value="点击这里" /></form></body><script type="text/javascript" for="myButton" event="onclick">alert("JavaScript");</script></html>

这种绑定方法中for指向的是绑定这个事件的元素的ID,event指的是事件的属性,但因为这种方式只针对IE,所以较少人使用,上述的JavaScript绑定事件的方式没有办法动态添加或移除事件,下面的这种方法则可以实现动态添加的效果

阅读

编辑

运行

复制

保存

<html><head><title>JavaScript动态添加事件</title></head><body><form id="myform"><input name="myButton" id="myButton" type="button" value="点击这里"/></form></body><script type="text/javascript">document.myform.myButton.onclick=new Function("alert('JavaScript')");</script></html>

如果myButton.onclick中是一个复杂的处理过程,你还可以将其写成一个函数进行调用,如

复制

保存

function alertSomething(){   alert("JavaScript");}document.myForm.myButton.onclick=alertSometing;

以上都是一些基本的事件模型,基本的事件模型在处理表单提交等简单任务时非常出色,但在处理更为复杂的事件中则显得力不从心,在IE4以后的浏览器支持的现代事件模型中,对事件的处理则强大得多,二者的主要区别在于现代事件模型增加了Event对象,上面的javascript动态添加事件中已有了如何去添加一个事件,但对于移除一个事件却没有好的办法,在IE5以后的浏览器中我们可以这样做.

阅读

编辑

运行

复制

保存

<h1>IE Attach/Detach 事件测试</h1>    <em id="someText">We may be in the gutter,but some of us are looking at the starts</em>    <input type="button" value="Attach Event" onclick="enableEvent();" />    <input type="button" value="Detach Event" onclick="disableEvent();" /><script type="text/javascript">document.getElementById("myButton").onmouseover=showMessage;    function showAuthor()    {      alert("Oscar Wilde");    }    function enableEvent()    {       someText.attachEvent("onmouseover",showAuthor);    }    function disableEvent()    {     someText.detachEvent("onmouseover",showAuthor);    }</script>

上面的代码中利用了文档对象的attachEvent和detachEvent方法,这个方法的两个参数中第一个参数是一个类似于"onclick"的字符串,第二个是事件发生时所要调用的函数.
在IE4+中,当事件发生时,会临时创建一个Event对象,并使其可用于适当的处理器,下面是这个Event对象的一些属性

属性	描述
srcElement	产生该事件的元素
type	以字符串形式返回事件类型
clientX	相对用户区域的X坐标
clientY	相对于用户区域的Y坐标
screenX	相对实际屏幕的x坐标
screenY	相对实际屏幕的Y坐标
button	确定是哪个按键被按下
keycode	按键的代码
altKey	alt键按下时为真
ctrlKey	ctrl键按下时为真
shiftKey	shift键按下时为真
cancelBubble	表明该事件是否应沿事件层次上移
returnValue	事件返回值
fromElement	被移动的元素
toElement	正在移动的元素

上面的一些属性本人也没去亲自测试过,所以它的一些用法还有待挖掘.DOM2中的事件模型就更多更复杂了,而因为IE6并没有提供对DOM2事件模型的支持,因此这里就不多介绍了.希望本文对你有所收获.