javascript事件绑定的三种方法

Love The Way You Lie 2022-07-15 22:24 213阅读 0赞

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。  
  
在JavaScript中，有三种常用的绑定事件的方法：

1.  在DOM元素中直接绑定；
2.  在JavaScript代码中绑定；
3.  绑定事件监听函数。

## 一. 在DOM元素中直接绑定 ##

这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：  
     onXXX="JavaScript Code"  
  
其中：

*  onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
 *  JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。  
  
1. 原生函数

实例演示：  
  
  
2. 自定义函数

<input onclick="myAlert()" type="button" value="点击我，弹出警告框" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script>

实例演示：

## 二. 在JavaScript代码中绑定 ##

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。  
  
在JavaScript代码中绑定事件的语法为：  
elementObject.onXXX=function()\{  
    // 事件处理代码  
\}  
  
其中：

*  elementObject 为DOM对象，即DOM元素。
 *  onXXX 为事件名称。

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

<input id="demo" type="button" value="点击我，显示 type 属性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签 } </script>

实例演示：

## 三. 绑定事件监听函数 ##

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。  
  
addEventListener()函数语法：  
elementObject.addEventListener(eventName,handle,useCapture);

<table style="width:764px; border-collapse:collapse; color:rgb(51,51,51); font-family:&quot;Microsoft Yahei&quot;,Arial,Helvetica,sans-serif; font-size:14px; line-height:22.4px; background-color:rgb(252,252,252)"> 
 <tbody> 
  <tr> 
   <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 参数</th> 
   <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 说明</th> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">elementObject</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">DOM对象（即DOM元素）。</td> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">eventName</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件&nbsp;click ，鼠标双击事件&nbsp;doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。</td> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">handle</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">事件句柄函数，即用来处理事件的函数。</td> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">useCapture</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。</td> 
  </tr> 
 </tbody> 
</table>

attachEvent()函数语法：  
elementObject.attachEvent(eventName,handle);

<table style="width:764px; border-collapse:collapse; color:rgb(51,51,51); font-family:&quot;Microsoft Yahei&quot;,Arial,Helvetica,sans-serif; font-size:14px; line-height:22.4px; background-color:rgb(252,252,252)"> 
 <tbody> 
  <tr> 
   <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 参数</th> 
   <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 说明</th> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">elementObject</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">DOM对象（即DOM元素）。</td> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">eventName</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。</td> 
  </tr> 
  <tr> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">handle</td> 
   <td style="padding:5px; border:1px solid rgb(204,204,204)">事件句柄函数，即用来处理事件的函数。</td> 
  </tr> 
 </tbody> 
</table>

注意：事件句柄函数是指“ 函数名 ”，不能带小括号。  
  
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。  
  
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

这里使用 try\{ ... \} catch(e)\{ ... \} 代替 if ... else... 语句，避免浏览器出现错误提示。  
  
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

复制纯文本新窗口

addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){ alert("又是一个警告框"); }