JavaScript事件绑定
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 οnclick="alert('警告框')">点击我，弹出警告框</button>
2.自定义函数
<button οnclick="myAlert()">点击我，弹出警告框</button><script>function myAlert() {alert("警告框");}</script>
二、在JavaScript代码中绑定
在JavaScript代码中（即
三、绑定事件监听函数
绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
addEventListener()函数语法：
elementObject.addEventListener(eventName, handle, useCapture);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false，与事件流相关。 |
attachEvent()函数语法：
elementObject.attachEvent(eventName, handle);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即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元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。
悠悠
傷城~
╰+攻爆jí腚メ
刺骨的言语ヽ痛彻心扉
你的名字
深藏阁楼爱情的钟
还没有评论，来说两句吧...