JavaScript 与 html 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.
一,事件流
事件流描述的是从页面中接收事件的顺序,IE 的事件流是事件冒泡流,而 Netscape Communicator 的事件流是事件捕获流.
1,事件冒泡
事件开始的时候由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).
2,事件捕获
事件开始的时候由最不具体的节点接收,然后逐级向下传播到最具体的节点.
来看一个实例:
<html>
<head>
<title>山水子农</title>
</head>
<body>
<div>
Click Me
</div>
</body>
</html>
如果单击了元素,那么,如果是事件冒泡流的事件流机制,则 click 事件将按照如下顺序进行执行:- -<html> -.如果采用捕获流的事件流机制,则 click 事件的执行顺序为: - - -
对于冒泡流的事件流机制,存在如下的兼容问题:
<=IE5.5 div ->
body -> document >=IE6.0 div -> body -> html ->document >=Mozilla
1.0 div -> body -> html ->document -> window
3,DOM 事件流
"DOM2 级事件" 规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段.
二,事件处理程序
1,HTML 事件处理程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function showMessage() {
alert("HTML 事件处理程序");
}
</script>
<title>HTML 事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me1" onclick="alert('HTML 事件处理程')" />
<input type="button" value="Click Me2" onclick="showMessage()" />
</body>
</html>
2,DOM0 级事件处理程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM0级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function() {
alert("DOM0级事件处理程序");
setTimeout(function() {
btn.onclick = null; //删除事件处理程序
alert("删除事件处理程序");
},
200);
}
</script>
</body>
</html>
3,DOM2 级事件处理程序
"DOM2 级事件" 定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click",
function() { //click不要on,三个参数.
alert("DOM2级事件处理程序1");
},
false);
btn.addEventListener("click",
function() {
alert("DOM2级事件处理程序2");
},
false);
//先输出DOM2级事件处理程序1后DOM2级事件处理程序2
</script>
</body>
</html>
使用 removeEventListener() 移除 addEventListener() 事件时,移除时传入的参数与添加处理程序时使用的参数相同.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var btn = document.getElementById("myBtn");
var handler = function() {
alert("DOM2级事件处理程序");
setTimeout(function() {
btn.removeEventListener("click", handler, false);
alert("删除事件处理程序");
},
1000);
};
btn.addEventListener("click", handler, false);
</script>
</body>
</html>
4,IE 事件处理程序
IE 实现了与 DOM 中类似的两个方法:attachEvent() 和 detachEvent().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",
function() { //click要加on,两个参数.
alert("IE事件处理程序1");
});
btn.attachEvent("onclick",
function() {
alert("IE事件处理程序2");
});
//先输出IE事件处理程序2后IE事件处理程序1.
</script>
</body>
</html>
使用 detachEvent() 移除 attachEvent() 事件时,移除时传入的参数与添加处理程序时使用的参数相同.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var btn = document.getElementById("myBtn");
var handler = function() {
alert("IE事件处理程序");
setTimeout(function() {
btn.detachEvent("onclick", handler);
alert("删除事件处理程序");
},
1000);
};
btn.attachEvent("onclick", handler);
</script>
</body>
</html>
5,跨浏览器的事件处理程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨浏览器的事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn" />
<script>
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) { //DOM2级
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //IE
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler; //DOM0级
}
},
//此处的","千万别忘记,EventUtil是对象.
removeHandler: function(element, type, handler) {
if (element.removeEventListener) { //DOM2级
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) { //IE
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null; //DOM0级
}
}
}
var btn = document.getElementById("myBtn");
var handler = function() {
alert("跨浏览器的事件处理程序");
setTimeout(function() {
EventUtil.removeHandler(btn, "click", handler);
alert("删除事件处理程序");
},
1000);
};
EventUtil.addHandler(btn, "click", handler);
</script>
</body>
</html>
来源: http://lib.csdn.net/article/javascript/35910