溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關javascript事件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
本文實例為大家分享了js事件的傳播，供大家參考，具體內容如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: deepskyblue;
}
#box2{
width: 200px;
height: 200px;
background-color: cadetblue;
}
#box3{
width: 100px;
height: 100px;
background-color: chocolate;
}
</style>
<script type="text/javascript">
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//如果是正常瀏覽器
obj.addEventListener(eventStr , callback , false);
}else{
//IE8
obj.attachEvent("on"+eventStr , function(){
callback.call(obj);
});
}
}
window.onload = function(){
/*
* 事件的傳播
* - 關于事件的傳播微軟和網景公司有著不同的理解
* - 微軟公司，認為事件應該是從后代元素向祖先元素傳播，即從里向外傳播，也就是我們所謂事件的冒泡
* - 網景公司，認為事件應該是從祖先元素向后代元素傳播，即從外向里傳播，這一階段我們稱為事件的捕獲
* - W3C綜合了兩個公司的方案,將事件的傳播分成了三個階段
* 1.捕獲階段
* - 事件從最外層的元素（document），向目標元素進行事件的捕獲
* - 此階段默認不會觸發事件
* 2.目標階段
* - 目標指的是觸發事件的元素，捕獲到目標元素則捕獲階段停止
* 3.冒泡階段
* - 事件從目標元素向祖先元素中冒泡，此時開始觸發事件
* - 默認事件都是在冒泡階段執行的
*
* - 事件都是默認在冒泡階段執行的，一般不需要在捕獲階段觸發事件，
* 如果希望在捕獲階段執行事件，則需要將addEventListener()的第三個參數修改為true
*
* - IE8及以下的瀏覽器沒有捕獲階段，也不能設置在捕獲階段觸發事件
*/
//分別為三個div綁定單擊響應函數
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
bind(box1,"click",function(){
alert(1);
})
bind(box2,"click",function(){
alert(2);
})
bind(box3,"click",function(){
alert(3);
})
};
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>關于“javascript事件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
