本文详细介绍了JavaScript中的事件处理，包括事件冒泡与事件捕获的概念，DOM0级、DOM2级事件处理程序的使用，以及IE事件处理程序和跨浏览器支持的策略。同时，讲解了事件对象在DOM和IE中的差异，帮助开发者深入理解JavaScript事件机制。
目录
一、事件冒泡与事件捕获
当我们在Web页面单击某一个元素的时候，比如某个div元素。仔细想想，我们单击的不仅仅是这一个div元素，一同被单击的还有以该div为圆心的同心圆元素，比如元素的父，外层body、body的父元素html还有外层的document。事件在这些嵌套的元素之间的传播称为事件流。
- 1、事件冒泡
- 2、事件捕获
1、事件冒泡
IE的事件流称为事件冒泡，事件从最具体的元素开始，逐级向上传播。我们使用DOM0添加的事件处理程序就是在事件冒泡阶段被处理的。例如：
<html>
<head>
<script type="text/javascript">
window.onload = bubblingHandle;
function bubblingHandle() {
//内层div处理程序
document.getElementById("inner").onmousedown = function() {
alert("inner div");
}
//外层div处理程序
document.getElementById("outer").onmousedown = function() {
alert("outerDiv");
}
document.onmousedown = function() {
alert("document");
}
}
-->
</script>
</head>
<body>
<div id="outer" style="background-color:black; padding: 15px;">
<div id="inner" style="background-color:white; padding: 5px;"></div>
</div>
</body>
</html>当点击内层的白色div时，会依次显示：
inner div
outer div
document
事件传播示意图如下：
事件捕获
网景提出的事件流称为事件捕获，其与IE几乎相反。事件首先由最不具体的元素接收，然后逐级向具体节点传播。
二、DOM0级事件处理
事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相应的代码。
DOM0级事件处理程序以其简单、跨浏览器支持的特点，至今仍为所有浏览器支持。
最低0.47元/天 解锁文章
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
