Отвязка события распространяемого циклом

Question

Есть код в котором происходит привязка события с помощью цикла, вопрос, как отвязать событие. Пример с привязкой из учебника.

window.onload = function() {
  var n = document.getElementsByClassName('text');
  var t = document.getElementsByTagName('body');

  for (var i = 0, v = 0; i < n.length, v < t.length; i++, v++) {
    var text = n[i];
    var o = t[v];
    if (text.addEventListener)
      text.addEventListener('click', s, false);
    else(o.addEventListener)
    addEventListener('click', m, true);
  }

  function s(event) {
    event.target.style.color = "red";
  }

  function m(event) {
    text.removeEventListener('click', s, true);
    text.style.color = "black";

  };
};

<body>
  <p class="text" style="font-weight: 700; cursor: pointer;">
    Мой текст
  </p>
</body>

Answer 1

Да очень просто. Прикрутил обработчик события на body с перехватом TRUE в else после выполнения if с использованием выражения в блоке else . Это просто пример реализации более сложной обработки события, для более углубленного понимания работы объекта события. Конечно класс из bootstrap любой разработчик подставит)

else(o.addEventListener)
    o.addEventListener('click', m, true);

function m(event) {
    text.removeEventListener('click', s, true);
    text.style.color = "black";

  };

И последний момент, в фигурных скобках код не работает, вероятно это связано с использованием выражения в else, но другого способа заставить работать код я не нашел. И в браузерах ie -9, для привязки события используем attachEvent("onclick", function_name) без перехватчика, для отвязки detachEvent() с теми же свойствами.

Answer 2

Прошу прощения за свою не внимательность, данный код выше не отвязывает событие, а просто перехватывает его через true, удаляет и заменяет на следующее событие зарегистрированное обработчиком, а потому более правильный код получился такой:

window.onload = function() {
  var n = document.getElementsByClassName('text'); 
  for  (var i = 0; i < n.length; i++) {
  var text = n[i];
  if (text.addEventListener) {
  text.addEventListener('click', function (event) {
  event.target.style.color = "red";
  }
  , false);
  }

  }
  
  var j = document.getElementsByClassName('body'); 
  for  (var k = 0; k < j.length; k++) {
  var t = j[k];
  if (t.addEventListener) {
  t.addEventListener('click', function() {
  text.style.color = "black";
  }, true);
  }
  }
 
};

Еще раз, пример, доработка из учебника JavaScript подробное руководство (ES6) Девида Фленагана и в реальных условиях он бесполезен, для обучения подойдет.

БЛОГ НА HUSL

Отвязка события распространяемого циклом

Ответы (2 шт):