Регистрация Войти
Войти через VK Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

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

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

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

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

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

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

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

<style>
    #myDIV {
        border: 2px solid #2375b1;
        padding: 15px;
        margin: 10px 0;
    }
   td {
       text-align:center;
       border: 1px solid #000;
   }
    tr:nth-child(1),
    tr:nth-child(2) {
        background-color:#ff9;
    }
    tr:nth-child(3),
    tr:nth-child(4) {
        background-color:#f99;
    }
    td input[type="button"] {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
</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>
<p>
    Пример назначения целевого объекта и отправки объекта Event с помощью метода addEventListener() объекта EventTarget.
</p>

<form name="controls" id="controls">
   <table>
      <caption style="font-weight:bold">Control Panel</caption>
      <tr>
         <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>
         <td><input type="button" value="Добавить в div" onclick=
            "addBubbleListener('myDIV')"></td>
         <td><input type="button" value="Удалить из div" onclick=
            "removeBubbleListener('myDIV')"></td>
      </tr>
      <tr>
         <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>
         <td><input type="button" value="Добавить в div" onclick=
            "addCaptureListener('myDIV')"></td>
         <td><input type="button" value="Удалить из div" onclick=
            "removeCaptureListener('myDIV')"></td>
      </tr>
   </table>
    <div id="myDIV">
        <span id="mySPAN">
            Этот блок, внутри которого в span заключен текст.<br>
            Нажимайте сюда мышью для просмотра возникающих событий.
        </span>
    </div>
    <p>Характеристики события:&nbsp;
        <input type="button" value="Clear" onclick="clearTextArea()">
    </p>
    <textarea name="output" cols="80" rows="6"></textarea>
</form>

.
Прокомментировать/Отблагодарить