JavaScript 与 HTML 之间的交互是通过事件实现的。
一、事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator 的事件流是事件捕获流。
(1)事件冒泡
IE 的事件流叫做事件冒泡,即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收,然后逐级向上传播到较为不具体的节点(文档)。
比如单击了页面中的<div>元素,那么这个click事件会按照如下顺序逐级向上传播,直至传播到 document 对象。
注意:所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素 (从 <body> 直接跳到 document) 。Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象
(2)事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
前面的例子的事件捕获过程为:
(3)DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
同样前面的例子触发事件的顺序为:
二、事件处理程序
事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头,比如 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有以下几种。
(1)HTML事件处理程序
在HTML中定义的事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本。
<input type="button" value="Click Me" οnclick="alert('Clicked')" />
或者
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" οnclick="showMessage()" />
关于动态创建的函数,另一个有意思的地方是它扩展作用域的方式。
function () {
with(document) {
with(this) {
//元素属性值
}
}
}
<input type="button" value="Click Me" οnclick="alert(value)">
如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素的入口。
function () {
with(document) {
with(this.form) {
with(this){
//元素属性值
}
}
}
}
<form method="post">
<input type="text" name&#