TOC PREV NEXT INDEX

Put your logo here!


例 5: イベント伝播(propagation)

この例は DOM でイベントが 発生したときの対処方法を、ごく単純化して紹介します。下記の HTML文書 の BODY が読み込まれる時、イベントリスナーが TABLE の第一行を使って登録されます。イベントリスナーは関数 l_func を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。

しかし、 l_func はまたイベントオブジェクトのメソッド stopPropagation を呼出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある onclick イベントハンドラーを備えています。しかし l_func メソッドは伝播を停止してますので、データが更新された後では、イベントは効率的に終了します。

<html> 
<head> 
  <style> 
    #t-daddy { border: 1px solid red } 
    #t1 { background-color: pink; } 
  </style> 
  <script> 
  function l_func(e) { 
    t2 = document.getElementById("t2"); 
    t2.innerHTML = "three"; 
    e.stopPropagation();  
?
  } 
 
  function load() { 
    el = document.getElementById("t"); 
    el.addEventListener("click", l_func, false); 
  } 
  </script> 
</head> 
<body onload="load();"> 
<table id="t-daddy" onclick="alert('hi');"> 
  <tr id="t"> 
     <td id="t1">one</td> 
  </tr> 
  <tr><td id="t2">two</td></tr> 
</table> 
</body> 
</html> 

mozilla DOM project | mailto:oeschger | tracking bug
TOC PREV NEXT INDEX