JavaScript事件绑定

刺骨的言语ヽ痛彻心扉 2022-06-06 02:15 292阅读 0赞

# JavaScript事件绑定 #

--------------------

JavaScript也称ECMAScript，是一种动态类型、弱类型、基于原型的直译式脚本语言；基于事件驱动，具有相对安全性并被广泛应用于客户端网页开发和客户端WEB开发。

最早是在HTML上使用的，用来给HTML网页添加动态功能，由[Netscape][]公司的[Brendan Eich][]在[网景导航者][Link 1]浏览器上首次设计实现而成。

设计JavaScript的主要目的是为了解决浏览器与用户交互的问题，为用户提供更好的浏览效果。因为当时浏览器只能浏览网页，无法与用户互动。比如你登录一个网站输入完用户名点击提交的时候，浏览器并不知道你是否输入了，也无法校验，只能传给服务器去校验。由于网络速度相当缓慢，只有28.2kbps，校验步骤浪费的时间太多。于是[Netscape][]公司在他们的[网景导航者][Link 1]浏览器中嵌入了JavaScript，提供了数据校验等基本功能。现在JavaScript也被用于网络服务器，如Node.js。

## 一、JavaScript函数 ##

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

**JavaScript函数语法：**

**无参函数：**

function functionname() {
            // 要执行的代码
        }

**带参函数（任意多的参数，参数之间用“,”分隔）：**

function functionname() {
            // 要执行的代码
        }

当调用函数时，会执行函数中的代码。

可以在某事件发生时直接调用函数，也可由JavaScript在任意位置进行调用（必须在被调用函数声明或引入之后的位置调用，否则浏览器将提示函数未定义的错误）。

函数可以返回任意类型的值，若函数末行没有**return**语句，那么函数默认返回undefined。

## 二、JavaScript绑定事件的三种方式 ##

为了使网站更好的与用户进行交互，我们需要为DOM元素绑定事件处理函数。所谓事件处理函数，就是用来处理用户操作的函数，不同的操作对应不同的函数。

在JavaScript中，有三种常用的事件绑定的方法：

1.在DOM元素中直接绑定；

2.在JavaScript代码中绑定；

3.绑定事件监听函数。

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

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

onXX = "JavaScript Code";

其中：

onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

JavaScript Code为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出一个警告框的代码有如下两种写法

**1.原生函数**

<button οnclick="alert('警告框')">点击我，弹出警告框</button>

**2.自定义函数**

<button οnclick="myAlert()">点击我，弹出警告框</button>
    <script>
        function myAlert() {
            alert("警告框");
        }
    </script>

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

在JavaScript代码中（即<script>标签或js文件内）绑定事件可以使JavaScript代码与HTML分离、文档结构清晰、便于管理和开发。

在JavaScript代码中绑定事件，语法如下：

elementObject.onXX = function () \{

// 事件处理代码

其中：

elementObject为DOM对象，即DOM元素。

onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

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

**1.匿名函数绑定**

<button id="demo" name="button">点击我，弹出name值</button>
    <script>
        document.getElementById("demo").onclick = function () {
            alert(this.name);
        }
    </script>

**2.函数名绑定**

<button id="demo" name="button">点击我，弹出name值</button>
    <script>
        var demo = document.getElementById("demo");
        function showName() {
            alert(demo.name);
        }
        demo.onclick = showName();// 错误的绑定方式，这种方式是先调用一次showName函数，然后再将showName函数的返回值绑定给onclick事件，如果函数返回值是一个函数对象，那么这个返回值就是onclick的事件处理函数；否则将忽略该返回值
        demo.onclick = showName;// 正确的绑定方式，showName指向一个函数对象（一个函数句柄），与匿名函数（一个匿名函数即一个匿名函数对象）绑定效果相同。

</script>

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

绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。

**addEventListener()函数语法：**

elementObject.addEventListener(eventName, handle, useCapture);

<table> 
 <tbody> 
  <tr style="background:rgb(237,237,237)"> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>elementObject</td> 
   <td>DOM对象（即DOM元素）。</td> 
  </tr> 
  <tr> 
   <td>eventName</td> 
   <td>事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。</td> 
  </tr> 
  <tr> 
   <td>handle</td> 
   <td>事件句柄函数，即用来处理事件的函数。</td> 
  </tr> 
  <tr> 
   <td>useCapture</td> 
   <td>Boolean类型，是否使用捕获，一般用false，与事件流相关。</td> 
  </tr> 
 </tbody> 
</table>

**attachEvent()函数语法：**

elementObject.attachEvent(eventName, handle);

<table> 
 <tbody> 
  <tr style="background:rgb(237,237,237)"> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>elementObject</td> 
   <td>DOM对象（即DOM元素）。</td> 
  </tr> 
  <tr> 
   <td>eventName</td> 
   <td>事件名称（注意：这里的事件名称有on，如鼠标点击事件onclick）。</td> 
  </tr> 
  <tr> 
   <td>handle</td> 
   <td>事件句柄函数，即用来处理事件的函数。</td> 
  </tr> 
 </tbody> 
</table>

**事件句柄函数是指“函数名”，不能带小括号**

**addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Firefox、Opera、Safari、IE9及其以上版本都支持该函数；但是，IE8及其以下版本不支持改函数，它使用attacheEvent()来绑定事件监听函数。所以，这种绑定方法，必须要处理浏览器兼容问题。**

下面是绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

例如，为一个id="demo"的按钮，绑定一个onclick事件，弹出按钮的name：

var demo = document.getElementById("demo");
        function showName() {
            alert(demo.name);
        }
        addEvent(demo, "click", showName);

## 三、总结 ##

在JavaScript中，有三种常用的事件绑定的方法：

1.在DOM元素中直接绑定；

2.在JavaScript代码中绑定；

3.绑定事件监听函数。

除了直接第一种直接在DOM元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。

[Netscape]: http://baike.baidu.com/view/153922.htm
[Brendan Eich]: http://baike.baidu.com/view/2135520.htm
[Link 1]: http://baike.baidu.com/view/1350596.htm