关于0级DOM /2级DOM 事件的执行顺序
在DOM事件流中，触发分为三个阶段
捕捉 ---- 目标 ----- 冒泡
最下面的html案例中，进行了阶段的测试，以及每个事件流的触发顺序
0级DOM事件 为：
<input type="text" name='input1' id='input2' value="input3">
document.getElementById('button2').onclick = function () {
alert(2);
}
2级别DOM事件为：
// 捕捉阶段
document.getElementById('button2').addEventListener('click',function(){alert(3)},true);
// 冒泡阶段
document.getElementById('button2').addEventListener('click',function(){alert(4)},false);
触发顺序为：2 3 4
<!doctype html>
<html>
<head></head>
<body>
<form name='form1'>
<div>
<div>
<input type="text" name='input1' id='input2' value="input3">
<input type="button" name ='button1' id='button2' value="button3" onclick="alert(1)">
</form>
<form name='form2'>
</form>
</div>
</div>
</body>
<script type="text/javascript">
// 结果触发流程 2 3 4
// 0 级别 DOM事件 替代了onclick原始事件模型
document.getElementById('button2').onclick = function () {
alert(2);
}
// 2 级 DOM 事件 标准事件模型
// 捕捉阶段
document.getElementById('button2').addEventListener('click',function(){alert(3)},true);
// 冒泡阶段
document.getElementById('button2').addEventListener('click',function(){alert(4)},false);
</script>
</html>
