交代一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<style type="text/css">
div {padding:40px;}
#div1{background: red;}
#div2{background: orange;}
#div3{background: green;}
</style>
</head>
<body>
<divid="div1"><divid="div2"><divid="div3"></div></div></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
/*此处详细内容由下面边说边填入 ---------1*/
</script>
</body>
</html>
事件
事件,就是文档或者浏览器窗口中发生的交互性的瞬间。如果文档或者浏览器窗口没有发生交互,也就是说,操作(点击,获得焦点,失去焦点等)文档中的某些元素,浏览器没有加载完成,浏览器窗口没有滚动,这些事件没有发生的话就不存在交互性的瞬间。
每个事件可以与具体的行为绑定。从而当初发该事件的时候会执行某种行为,同时也可以不绑定,那么当触发的时候不会执行任何行为。
事件流
事件流描述的是从页面中接受事件的顺序。接受事件的顺序有两种,一种是冒泡,一种是捕获。但是在非标准浏览器下仅仅支持事件冒泡,标准浏览器两者都支持。事件流的放生仅仅与文档中html元素的结构有关(或者与DOM树中结构有关),与这些元素在页面中呈现的方式无关。
###事件冒泡
当一个元素接受的发生的事件之后,会将这个事件沿着DOM树向上传播到不具体的节点(document)。在这个向上传播过程中,会触发每一个途径元素的该事件,如果这个事件没有与任何行为绑定,那么当经过这个元素时不会发生任何动作,否则,执行相应的动作。
Eg:
div3接受一个点击事件,同时根据事件冒泡原则,会将这个事件在DOM树中向document的方向传播。因为div3的onclick内置属性绑定了fun函数,所以会弹出div3,但是div2的onclick值没有与任何行为绑定值是空的,所以当onclick事件冒泡到div2的时候没有任何反应,同理div3会弹出div3。同理,document的onclick事件没有与任何行为绑定,所以也不会有显现的执行动作。
###事件捕获
当一个事件