在瀏覽器中,事件處理方式有三種:
1.在IE中,事件冒泡.事件是從事件發生的目標最內部開始觸發,向上觸發到最外部;
2.在Navigator4.0中,事件捕獲.與冒泡剛好相反,他是從事件的最外層對象到最裏層的對象;
3.在DOM中,同時支持事件捕獲和事件冒泡.但是事件捕獲先發生;
事件處理程序的指派方式有三種,分別是:
1.傳統的事件處理程序指派方式.代碼如下(body部分):
<body>
<input type="button" id="btnclick" value="點擊" />
<script type="text/javascript">
var btn=document.getElementById("btnclick");
function hhh(){
alert("傳統的事件處理程序指派方式,,,你點擊了我");
}
btn.onclick=hhh;
</script>
</body>
2.現代事件處理程序的指派方法主要又分爲IE瀏覽器和DOM提供的瀏覽器;具體如下:
<body>
<input type="text" id="text1" value="textname"/>;
<input type="button" id="btn1" value="addclick" />
<input type="button" id="btn2" value="deleclick" />
<script type="">
function click1(){
alert("input");
}
function click2(){
alert("body");
}
function click3(){
alert("html");
}
function deleclick(){//在IE中刪除事件處理程序的方法
document.getElementById("btn1").detachEvent("onclick",click3);
}
function removeclick(){//在DOM中刪除事件處理程序的方法
document.body.removerEventListener("click",click3,false);
}
if(document.attachEvent){//在 IE中
document.getElementById("btn1").attachEvent("onclick",click1);
document.getElementById("btn1").attachEvent("onclick",click2);
document.getElementById("btn1").attachEvent("onclick",click3);
//點擊btn1時,得到的結果爲:html->body->input
//點擊btn2後,在點擊btn1,得到色結果爲: body->input
document.getElementById("btn2").attachEvent("onclick",deleclick);
}
else if(document.addEventListener){//在DOM中
document.getElementById("btn1").addEventListener("click",click1,false);//獲取body元素的第一個子元素後添加事件處理程序的指派方式
document.body.addEventListener("click",click2,false);//獲取body元素本身後添加事件處理程序的指派方式
document.documentElement.addEventListener("click",click3,false);//獲取html元素本身後添加事件處理程序的指派方式
//當爲false時,表明是冒泡, 即點擊btn1時,得到的結果爲:input->body->html
//當爲true時,表明是捕獲, 即點擊btn1時,得到的結果爲:html->body->input
document.getElementById("btn2").addEventListener("click",removeclick,false);
}
</script>
</body>
</html>