浅谈JavaScript中的事件

╰+哭是因爲堅強的太久メ 2022-08-23 14:55 254阅读 0赞

事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针对JavaScript而言)  
  
在开始本文之前,我们先来了解下什么是事件?在一个Web页面中,浏览器有能力调用JavaScript,以响应用户的操作.例如:当用户点击了某个链接或者编辑了表单域中的内容,浏览器就会调用相应的Javascript代码.在此过程中,JavaScript响应的操作就称为事件.好了,基本概念完了,我们接下来来了解JavaScript中的事件模型之一基本事件模型.  
  
这里列出XHTML中的基本事件及其处理器属性

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

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

![HTML][]阅读 ![HTML][HTML 1]编辑 ![HTML][HTML 2]运行 ![HTML][]复制   ![保存][Save.jpg]保存

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

![HTML][]阅读 ![HTML][HTML 1]编辑 ![HTML][HTML 2]运行 ![HTML][]复制   ![保存][Save.jpg]保存

<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="点击这里" οnclick="alertsomething()" />
    </form>
    </body>
    </html>

<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="点击这里" οnclick="alertsomething()" /> </form> </body> </html>

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

![HTML][]阅读 ![HTML][HTML 1]编辑 ![HTML][HTML 2]运行 ![HTML][]复制   ![保存][Save.jpg]保存

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

<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][]阅读 ![HTML][HTML 1]编辑 ![HTML][HTML 2]运行 ![HTML][]复制   ![保存][Save.jpg]保存

<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.οnclick=new Function("alert('JavaScript')");
    </script>
    </html>

<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.οnclick=new Function("alert('JavaScript')"); </script> </html>

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

![javascript][]复制   ![保存][Save.jpg]保存

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

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

![HTML][]阅读 ![HTML][HTML 1]编辑 ![HTML][HTML 2]运行 ![HTML][]复制   ![保存][Save.jpg]保存

<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" οnclick="enableEvent();" />
        <input type="button" value="Detach Event" οnclick="disableEvent();" />
    <script type="text/javascript">
    document.getElementById("myButton").οnmοuseοver=showMessage;
        function showAuthor()
        {
          alert("Oscar Wilde");
        }
        function enableEvent()
        {       someText.attachEvent("onmouseover",showAuthor);
        }
        function disableEvent()
        {     someText.detachEvent("onmouseover",showAuthor);
        }
    </script>

<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" οnclick="enableEvent();" /> <input type="button" value="Detach Event" οnclick="disableEvent();" /> <script type="text/javascript"> document.getElementById("myButton").οnmοuseοver=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对象的一些属性

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

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

[HTML]: http://www.chenjiliang.com/Image/Extension/htm.gif
[HTML 1]: http://www.chenjiliang.com/Image/Extension/edithtml.gif
[HTML 2]: http://www.chenjiliang.com/Image/Extension/runhtml.gif
[Save.jpg]: http://www.chenjiliang.com/Image/Save.jpg
[javascript]: http://www.chenjiliang.com/Image/Extension/js.gif