AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Исследование W3C Модели событий

Третий параметр метода addEventListener() объекта EventTarget указывает, можно ли перехватить событие обработчиком события родительского объекта для данного целевого объекта.

Пример назначения целевого объекта и отправки объекта Event с помощью метода addEventListener() объекта EventTarget.


Этот параграф, внутри которого в SPAN заключен текст. Нажимайте сюда мыщью для просмотра возникающих событий.

Характеристики события: 

Control Panel
всплытие запрещено:
всплытие разрешено:


Исходный код этого примера:

<style type="text/css">
td {text-align:center}
</style>
<script type="text/javascript">
// add event listeners
function addBubbleListener(elemID) {
   document.getElementById(elemID).addEventListener("click", reportEvent, false);
}
function addCaptureListener(elemID) {
   document.getElementById(elemID).addEventListener("click", reportEvent, true);
}
// remove event listeners
function removeBubbleListener(elemID)  {
   document.getElementById(elemID).removeEventListener("click", reportEvent, false);
}
function removeCaptureListener(elemID) {
   document.getElementById(elemID).removeEventListener("click", reportEvent, true);
}
// display details about any event heard
function reportEvent(evt) {
   var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
   if (elem.id == "mySPAN") {
      var msg = "Event processed at " + evt.currentTarget.tagName +
      " element (event phase = " + evt.eventPhase + ").\n";
      document.controls.output.value += msg;
   }
}
// clear the details textarea
function clearTextArea() {
   document.controls.output.value = "";
}
</script>
<body id="myBODY">

<h1>Исследование W3C Модели событий</h1>

<p>Третий параметр метода addEventListener() объекта EventTarget указывает, можно ли перехватить
событие обработчиком события родительского объекта для данного целевого объекта.

<p>Пример назначения целевого объекта и отправки объекта Event с помощью метода addEventListener() объекта EventTarget.


<p id="myP"><div id="mySPAN" class=res><br>Этот параграф, внутри которого в SPAN заключен текст.
Нажимайте сюда мыщью для просмотра возникающих событий.<br></div></p>

<form name="controls" id="controls">
   <p>Характеристики события:&nbsp;<input type="button"
      value="Clear" onclick="clearTextArea()" /><br />
      <textarea name="output" cols="80" rows="6" wrap="virtual">
      </textarea></p>
   <table cellpadding="5" border="1">
      <caption style="font-weight:bold">Control Panel</caption>
      <tr style="background-color:#ffff99">
         <td rowspan="2">всплытие запрещено:</td>
         <td><input type="button" value="Добавить в BODY" onclick=
            "addBubbleListener('myBODY')" /></td>
         <td><input type="button" value="Удалить из BODY" onclick=
            "removeBubbleListener('myBODY')" /></td>
      </tr>
      <tr style="background-color:#ffff99">
         <td><input type="button" value="Добавить в P" onclick=
            "addBubbleListener('myP')" /></td>
         <td><input type="button" value="Удалить из P" onclick=
            "removeBubbleListener('myP')" /></td>
      </tr>
      <tr style="background-color:#ff9999">
         <td rowspan="2">всплытие разрешено:</td>
         <td><input type="button" value="Добавить в BODY" onclick=
            "addCaptureListener('myBODY')" /></td>
         <td><input type="button" value="Удалить из BODY" onclick=
            "removeCaptureListener('myBODY')" /></td>
      </tr>
      <tr style="background-color:#ff9999">
         <td><input type="button" value="Добавить в P" onclick=
            "addCaptureListener('myP')" /></td>
         <td><input type="button" value="Удалить из P" onclick=
            "removeCaptureListener('myP')" /></td>
      </tr>
   </table>
</form>


. Самая детальная информация натяжные потолки в Краснодаре у нас на сайте.

© Copyright 2008-2016 by KDG