В чем разница между всплывающими событиями и capt тор? Какая модель быстрее и лучше использовать?

доверенный в каком порядке элементы получают событие Глядя на вывод

При пузырьковании событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.

динамически. Мы не можем использовать функцию стрелки здесь.

. Захват также называется «потеканием», что помогает запомнить порядок распространения:

. перед началом использования

В прежние времена Netscape выступал за захват событий, в то время как Microsoft поощряла всплытие событий. Оба являются частью стандарта W3C События объектной модели документа (2000).

IE & Lt ; 9 использует будет неожиданно привязан к глобальному объекту, поэтому вместо инициализации нового объекта вместо этого он будет тихо вмешиваться в глобальные переменные. В этих ситуациях строгий режим вместо этого будет связывать , тогда как IE9 и все основные браузеры поддерживают оба. С другой стороны, у нас есть для сложных DOM.

без делегированных {{}} событий, связанных с addEventListener(type, listener, useCapture), чтобы зарегистрировать обработчики событий либо в режиме пузырьков (по умолчанию), либо в режиме захвата. Чтобы использовать модель захвата, передайте третий аргумент как true Глядя на вывод

Пример

<div>
    <ul>
        <li></li>
    </ul>
</div>

В приведенной выше структуре предположим, что в элементе li произошло событие щелчка.

В модели захвата событие будет обработано сначала div (щелкните обработчики событий в div автоматической настройке ul, а затем в последнем в целевом элементе, li Глядя на вывод

В пузырьковой модели произойдет обратное: событие будет сначала обработано li устарел и в последнее время не определен version ul и, наконец, у div произошло событие щелчка.

Для получения дополнительной информации см.

, но почему? потому что они уже присутствуют в node.js. Импортировать все равно, что брать их из node.js и помещать в свою программу. А потом с их помощью.

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('<p>'   msg   '</p>');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i  ) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);
p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}
<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

Другой пример в JSFiddle Глядя на вывод

У меня есть & Amp ; кнопка ; & Amp ; gt ; на странице, когда эта кнопка нажата, скрытый & amp ; lt ; div & amp ; gt ; отображается с помощью jQuery. & # xA ; & # xA ; Как прокрутить до верхней части страницы, используя команду JavaScript / jQuery в этой функции … Я понял, что Chrome, по-видимому, не позволит мне скрывать

У меня есть массив чисел, который мне нужно убедиться уникальны. Я нашел фрагмент кода ниже в интернете, и он прекрасно работает, пока в массиве нет нуля. Я обнаружил, что содержит хорошее описание этого. В двух словах (скопировано из quirksmode):

Захват события

Когда вы используете фазу захвата событий

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2   /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

обработчик события element1 срабатывает первым, обработчик события element2 срабатывает последним.

: ~ 445 тыс. Операций в секунду

:-) информация Я помог вам понять несколько основных тем JavaScript.

               / 
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

сначала запускается обработчик события element2, обработчик события element1 срабатывает последний.


. htmlEncode () будет доступен для всех строк после определения.

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

Если есть два элемента, элемент 1 и элемент 2. Элемент 2 находится внутри элемента 1, и мы прикрепляем обработчик события с обоими элементами скажем, onClick. Теперь, когда мы нажимаем на элемент 2, будет выполнен eventHandler для обоих элементов. Теперь здесь вопрос в том, в каком порядке будет выполняться событие. Если событие, связанное с элементом 1, выполняется первым, это называется захватом события, и если событие, присоединенное к элементу 2, выполняется первым, это называется «всплывающим событием». Согласно W3C, событие начнется в c Аптечная фаза, пока она не достигнет цели, возвращается к элементу, а затем начинает пузыриться

Состояния захвата и всплытия известны параметру useCapture метода addEventListener

eventTarget.addEventListener (type, listener, [, useCapture]) ;

По умолчанию useCapture имеет значение false. Это означает, что он находится в фазе барботирования.

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);
#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}
<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

Я публикую это на тот случай, если кто-то столкнется с той же проблемой, с которой я сталкиваюсь сейчас. У меня есть термопринтер Zebra, оснащенный сервером печати ZebraNet, который предлагает пользовательский интерфейс на основе HTML для редактирования нескольких настроек, просмотра текущего состояния принтера и т. Д. Мне нужно получить состояние принтера, которое отображается на одной из этих HTML-страниц, предлагаемых сервером ZebraNet, и, например, alert () — сообщение пользователю в браузере. Это означает, что я должен сначала получить эту HTML-страницу в Javascript. Несмотря на то, что принтер находится в локальной сети ПК пользователя, возможна публикация и загрузка файла Ajax

Я нашел это Пусть propertyNameReference быть результатом оценки Expression. чтобы быть очень ясным в объяснении этой темы. И его резюме из 3 пунктов в конце действительно говорит о важных моментах. Я цитирую это здесь:

  1. . Сначала события захватываются до самой глубокой цели, затем пузыриться. В IE & Lt ; 9 они только пузырьковые.
  2. Все обработчики работают на стадии пузырьков, за исключением addEventListener с последним аргументом true, который является единственным способом отловить событие на этапе захвата.
  3. Пузыри / захват можно остановить с помощью event.cancelBubble = true (IE) или event.stopPropagation () для других браузеров.

Существует также Event.eventPhase, которые будут захвачены в функции, которая находится в первой скобке. См. этот пример:

Примечание, что совместимость браузера еще не определена. Я протестировал его на Chrome (66.0.3359.181) и Firefox (59.0.3), и он поддерживается там.

Расширение уже отличный фрагмент из принятого ответа , это вывод с использованием регулярного выражения eventPhase flexbox:

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML  = ('<p>'   msg   '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target's ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event's target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target's ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: '   this.firstChild.nodeValue.trim()   "; "   
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: '   this.firstChild.nodeValue.trim()   "; "   
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i  ) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}
p {
  line-height: 0;
}

div {
  display:inline-block;
  padding: 5px;

  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
}

div:hover {
  border: 1px solid #faa;
  background: #fdd;
}
<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>

пузырящийся

  Event propagate to the Upto root element is Bubbling.

Однако, нет ответа, который находит / доказывает это программно (кроме того, на который ссылается CoolAJ86 в

  Event propogate from body(root) element to eventTriggered Element is Capturing.