Javascript小进阶3-事件模型细节

ITPUB老博客搬迁至此

首先我们还得了解:

事件对象：事件发生时系统自动产生的对象，其内封装了此事件的所有信息。

低版本IE：window.event

W3C ：事件绑定时直接传参数如：obj.onclick = function(event){};当事件触发时，浏览器会将事件信息封装到事件对象中，然后作为参数传递obj.onclick(event)并且执行之。

事件模型：指嵌套的多个元素都有绑定了同一种事件，当此事件发生时，事件发生的先后顺序是从最外层向最里层，还是从最里层到最外层。

从最里层到最外层：冒泡模型（默认）

从最外层向最里层：捕捉模型（不建议了）

案例：

<--div id="div1" width="1000px">

<--div id="div2" width="700px">

<--div id="div3" width="300px">

<--font color="green">green<--/font>

<--/div>

<--font color="yellow">yellow<--/font>

<--/div>

<--font color="red">red<--/font>

<--/div>

<--script>

document.getElementById("div3").onclick = function(event){

alert("green");

}

document.getElementById("div2").onclick = function(event){

alert("yellow");

}

document.getElementById("div1").onclick = function(event){

alert("red");

}

<--script>

不过我很少遇到需要事件冒泡的需求，所以我们经常会把冒泡禁止掉：

基于W3C浏览器中：

event.stopPropagation();

基于旧版本的IE中：

e.cancelBubble=true;

<--script>

document.getElementById("div3").onclick = function(event){

alert("green");

stopEventBubble(event);

}

document.getElementById("div2").onclick = function(event){

alert("yellow");

stopEventBubble(event);

}

document.getElementById("div1").onclick = function(event){

alert("red");

stopEventBubble(event);

}

//阻止事件冒泡

functionstopEventBubble(event){

vare=event || window.event;

if(e && e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; }

}

<--/script>

tips:

html部分元素的默认行为及如何控制：

链接：点击后跳转

提交按钮：点击后提交