複数の要素に同じイベントハンドラを設定した場合、それらは普通内側から外側に処理される（バブルアップ）。
以下のコードは、Handler3,Handler2,Handler1の順に表示される。
＜html＞
＜head＞
＜script type=text/javascript＞
window.onload = setupEvents;
function setupEvents(){
document.onmousedown =
function(event){
var theEvent = event ? event : window.event;
alert(Handler1:type= + theEvent.type);
}
document.getElementById(outer).onmousedown =
function(){
alert(Handler2);
}
document.getElementById(inner).onmousedown =
function(){
alert(Handler3);
}
}
}
＜/script＞
＜/head＞
＜body＞
＜div id=outer style=padding: 20px; background-color: #ff0; width=: 150px＞
外側のdiv要素
＜div id=inner style=background-color: #f00; width: 10px; height: 100px＞
内側のdiv要素
＜/div＞
＜/div＞
＜/body＞
＜/html＞
ある条件を満たしたときに、外側へのイベントハンドラを起動させたくない場合には、イベントの伝播を止めることができる。
イベントを止める処理は、ブラウザ依存となる。
IEの場合には、イベントオブジェクトのcancelBufflepプロパティをtrueにする。
Netscape系の場合は、イベントオブジェクトのstopPropagationメソッドを使う。
どちらであるかを判定するには、stopPropagationメソッドの有無を調べ、ある場合にはstopPrppagationメソッドを、ない場合にはcancelBubbleプロパティを使う。
function stopEvent(event){
if( event.stopPropagation ){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
これを組み込んだ例を示す。
＜html＞
＜head＞
＜script type=text/javascript＞
window.onload = setupEvents;
function stopEvent(event){ if( event.stopPropagation ){ event.stopPropagation(); } else{ event.cancelBubble = true; } }
function setupEvents(){
document.onmousedown =
function(event){
var theEvent = event ? event : window.event;
alert(Handler1:type= + theEvent.type);
}
document.getElementById(outer).onmousedown =
function(){
alert(Handler2);
}
document.getElementById(inner).onmousedown =
function(){
alert(Handler3);
stopEvent(event ? event : window.event); //イベントの伝播を中止
}
}
}
＜/script＞
＜/head＞
＜body＞
＜div id=outer style=padding: 20px; background-color: #ff0; width=: 150px＞
外側のdiv要素
＜div id=inner style=background-color: #f00; width: 10px; height: 100px＞
内側のdiv要素
＜/div＞
＜/div＞
＜/body＞
＜/html＞