在学习函数的时候会遇见很多的函数事件,本篇将对其进行详细的讲解。

什么是事件?

JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript)与页面的外观(HTML与CSS)之间的松散耦合。

事件流

事件流描述的是从页面中接受事件的顺序。假设如下代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div1"></div></body></html>

点击div,这个点击不仅仅发生在div上,其父容器body也会被点击。那到底谁先被点击或者说事件是怎么传播的?事件流描述的就是这样一个接受事件的顺序。

IE事件流(事件冒泡)

IE事件流也叫事件冒泡,即事件开始时由最具体的元素(文档中嵌套层最深的那个节点)接收,然后逐级传播到较为不具体的节点(文档)。
以上面的代码为例,如果你点击了div元素,那么这个click事件会按如下顺序进行传播:

1.<div> 2.<body> 3.<html> 4.document

就是说,click事件首先发生在div元素上,而这个元素就是我们单击的元素,然后click事件沿DOM树向上传播,在每一级节点上都会发生,直到传播到document对象。

所有的现代浏览器都支持事件冒泡,但是有一些差别。IE5.5及更早版本中的事件冒泡会跳过html元素,从body直接到document。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。(旧IE浏览器只支持事件冒泡)。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而具体的节点应该最后接收到事件,正好与事件冒泡相反,再以上面的例子为例,点击div,事件捕获的事件触发顺序如下:

1.document 2.<html> 3.<body> 4.<div>

在事件捕获过程中,document对象首先接受到click事件,然后事件沿DOM树依次向下,一直传播到事件的实际目标。

IE9,Firefox、Chrome、Safari和Opera都支持事件捕获。虽然DOM2级事件规范要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。

DOM事件流

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截取事件提供机会。然后是实际的目标接受到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。

在DOM事件流中,实际的目标在捕获阶段不会接受到事件。这意味着在捕获阶段,事件从document到html再到body就停止了。下一阶段是处于目标阶段,于是事件在div上发生,并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件传回ducument。
但实际上,IE9,Firefox、Chrome、Safari和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。(IE8及更早版本不支持DOM事件流)。

事件处理程序

事件就是用户或浏览器自身执行的某种动作。像是click、load和mousover,都是事件的名字。响应某个事件的函数叫做事件处理程序(事件监听器)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的处理程序就是onload。有下面几种为事件指定处理程序的方法。

HTML事件处理程序

某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML属性来指定。这个属性的值应该是能够执行的JavaScript代码,示例:

<button id="myButton" onclick="alert('Clicked')">Click Me</button>//定义了一个按钮,点击时会显示一个警告框;

在HTML中定义事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本,示例:

<button id="myButton" onclick="showMsg()">Click Me</button> //点击按钮就会调用showMsg()函数;<script> function showMsg() { alert('Hello world!') }</script>

通过HTML指定事件处理程序有两个缺点:1.时差问题,因为用户可能会在HTML元素一出现页面就触发相应事件,但此时事件处理程序有可能尚不具备执行条件;2.HTML与JavaScript代码紧密耦合,如果要更换事件处理程序,就要改动HTML代码和JavaScript代码。

DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。每一个元素都有自己的事件处理程序属性,这些属性通常全部小写,如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序,示例:

var btn = document.getElementById('myButton'); btn.onclick = function() { alert("Clicked") }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候事件处理程序是在元素的作用域中运行;换句话说,程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序,示例:

btn.onclick = null; //删除事件处理程序; DOM2级事件处理程序

DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。示例:

var btn = document.getElementById('myButton'); //为按钮添加了click事件和处理程序; btn.addEventListener('click',function() { alert(this.id) },false)

与DOM0级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序,示例:

var btn = document.getElementById('myButton'); //为按钮添加了多个click事件和处理程序; btn.addEventListener('click',function() { alert(this.id); },false); var btn = document.getElementById('myButton'); ; btn.addEventListener('click',function() { alert('hello world!'); },false);