JavaScript事件绑定

---

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

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

设计JavaScript的主要目的是为了解决浏览器与用户交互的问题，为用户提供更好的浏览效果。因为当时浏览器只能浏览网页，无法与用户互动。比如你登录一个网站输入完用户名点击提交的时候，浏览器并不知道你是否输入了，也无法校验，只能传给服务器去校验。由于网络速度相当缓慢，只有28.2kbps，校验步骤浪费的时间太多。于是Netscape公司在他们的网景导航者浏览器中嵌入了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 onclick="alert('警告框')">点击我，弹出警告框</button>

2.自定义函数

<button onclick="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);

参数说明elementObjectDOM对象（即DOM元素）。eventName事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。handle事件句柄函数，即用来处理事件的函数。useCaptureBoolean类型，是否使用捕获，一般用false，与事件流相关。

attachEvent()函数语法：

elementObject.attachEvent(eventName, handle);

参数说明elementObjectDOM对象（即DOM元素）。eventName事件名称（注意：这里的事件名称有on，如鼠标点击事件onclick）。handle事件句柄函数，即用来处理事件的函数。

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

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

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

    function addEvent(eleObj, eventName, handle) {        if (eleObj.attachEvent) {// IE8及其以下版本            eleObj.attachEvent("on" + eventName, handle);        } else if (eleObj.addEventListener) {// Chrome、Firefox、Opera、Safari、IE9及其以上版本            eleObj.addEventListener(eventName, handle);        } else {// 早期版本            eleObj["on" + eventName] = handle;        }    }

例如，为一个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元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。