в javascript, как определить и вызвать унаследованных слушателей?

Question

Если к элементу прикреплен слушатель change, его можно вызвать с помощью item.onchange(). Но что, если триггер изменения исходит от родительского узла?

Контекст: используйте событие input для захвата вверх / вниз изменений элемента INPUT type = 'number', поскольку change делает не их захват.

Теория работы: используйте input для захвата, но подождите 500 мс, прежде чем вызывать обычных change слушателей. Легко, когда слушатель change подключен непосредственно к целевому элементу. Проблема необходима также для вызова унаследованных триггеров изменения - как узнать, существуют ли они, и как я их называю?

HTML:

<form id='f'>
  <input type='number' id='i' />
</form>

Javascript:

// attach main onchange trigger to form
document.getElementById('f').addEventListener('change',changeFunc,true);

// if user "scrolls" number value, do same as change trigger after 500 ms
var inputCt = 0;
function inputToChange(e) {
   inputCt++;
   setTimeout( next, 500 );
   function next() {
      inputCt--;
      if( !inputCt ) {
         // if element has it's own change trigger, call it
         if( e.target.onchange ) e.target.onchange(e);
         // PROBLEM - how to call inherited change triggers
      }
   }
}
document.getElementById('f').addEventListener('input',inputChange,true);

Единственный способ, которым я это вижу, - это вручную проходить через предков, проверяя существование и вызывая меня по ходу. Но это приводит к следующей проблеме: любая из этих функций слушателя могла быть выдана как e.stopPropagation, но теперь я вижу способ определить, действительно ли это так - что означает, что восхождение на предков не будет работать.

<ч />

согласно ответу @Andy E на Как вручную вызвать событие onchange? , вот решение:

Javascript:

// attach main onchange trigger to form
document.getElementById('f').addEventListener('change',changeFunc,false);

// if user "scrolls" number value, do same as change trigger after 500 ms
var inputCt = 0;
function inputToChange(e) {
   inputCt++;
   setTimeout( next, 500 );
   function next() {
      inputCt--;
      if( inputCt ) return;
      var change = var change = document.createEvent("Event");
      change.initEvent('change',true,true);
      e.target.dispatchEvent(change);
   }
}
document.getElementById('f').addEventListener('input',inputChange,false);

примечание 1: что useCapture (третий) аргумент для addEventListener был неправильным - должно быть ложным, поэтому триггеры элементов вызываются до триггеров формы.

примечание 2: эта функция, вероятно, лучше подходит для «щелчка», чем «ввода» - проблема с «щелчком» заключается в том, что щелчки фокусировки и позиционирования текста следует отличать от щелчка, меняющего значение.

Answer 1

согласно @Andy E в ответ на Как вручную вызвать событие onchange? , создать событие и отправить его.поставили детали в вопросе.

кстати, onchange устанавливается тогда и только тогда, когда триггер change был установлен через атрибут onchange, не с addEventListener('change',...)

Answer 2

В прослушивателе событий создайте ссылку на объект this (например, var that = this;).Затем вы можете использовать that.onchange(e); в теле next.

Answer 3

Изменение даже не сработает при «вверх / вниз». Я предполагаю, что вы имеете в виду стрелку вверх / вниз?

Если это так, вам нужно захватить ключевое событие (нажатие клавиши, нажатие клавиши вверх, нажатие клавиши и т. Д.) Для этих событий KEY.

Answer 4

Используя jQuery, $(e.target).change() должен сделать эту работу, я считаю.Или $(e.target).trigger(eventname), с eventname = 'change' в вашем случае и любым другим именем события в целом.

Очевидно, change событие действительно только в input s, textarea s и selects, которые не могут быть вложенными.Таким образом, у вас не может быть проблем, когда родитель определяет обработчик события изменения, который должен быть запущен после дочернего.