Привязать к динамически добавленному содержимому БЕЗ jquery?

Если я добавляю форму на свою страницу динамически (через AJAX или другую JS), как я могу добавить прослушиватели событий к этим элементам в pageload до их существования?Привязать к динамически добавленному содержимому БЕЗ jquery?

Я знаю, что с JQuery это довольно легко привязать к родительскому элементу, что-то вроде этого:

$(document).on('blur', 'input', function() {...})

, но я не ясно о том, как это сделать с ванильным JS, как addEventListener должны быть применены непосредственно к сам элемент и не может указать родительский элемент, для которого должно распространяться событие? (Я думаю, правильно ..?)

источник

2016-09-26 Drew

Ну, '$ (документ) .На (...)' связывает событие 'document'. Вы бы сделали то же самое. Все, что вам нужно сделать вручную в обработчике событий, - проверить, происходит ли событие из элемента 'input'. –

Вы можете сделать это аналогичным образом. Вы присоединяете слушателя к «документу» и проверяете, является ли целевая цель клика той, которую вы хотите, и выполняйте свое действие оттуда. – putvande

В этом примере я специально ищу размытие ввода, поэтому, если я 'addEventListener' документировать событие« размытие », разве это не срабатывает? Мне нужно конкретно сказать, по существу, если ввод в документе размывается, а не сам документ. – Drew

Вот как я это сделаю. Делегирование прост. Связано с главным родителем. Чем ближе, тем лучше и быстрее. Например, если вы хотите делегировать событие в конкретном div, это будет лучше; избегать конфликтов. Сравните event.target с вашей цели вы после, и вызвать ваша функция

document.addEventListener('blur', function(event){ 
 
    
 
    if(event.target.tagName == 'INPUT'){ 
 
     onInputBlur.apply(this, arguments); 
 
    } 
 

 
}, true); 
 

 
function onInputBlur(event){ 
 
    
 
    // console.log(event); // event 
 
    console.log(event.target.value); 
 
    
 
}

<input type="text"/> 
 
<input type="text"/> 
 
<input type="number"/>

источник

2016-09-26 18:31:51

Вы можете добавить слушателей событий в vanilla js довольно легко, как обычно. Раздражающие фокус/размытие ведут себя немного по-разному для большинства событий (см.: http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html#link2), поэтому для того, чтобы это действительно работало, вам нужно добавить индекс вкладок в элемент контейнера.

document.querySelector(".container").addEventListener("blur", function(e){ 
    if(e.target.tagName == "input"){ 
     // do stuff 
    } 
},false);

Быстрый пример этого в действии https://jsfiddle.net/2n0v43gc/ (Edit: чтобы увидеть результат, вам нужно консоль открытой (F12 на окнах))

источник

2016-09-26 18:17:12 Carl

function addEvent(a,b,c){ 
document.addEventListener(a,e=> { 
      if (e.target !== e.currentTarget) { 
      if(e.target.id==b){ 
     c(); 
     } 
        } 
        e.stopPropagation(); 
    },false); 
    }

Использование так:

addEvent("click","elem",function(){});

источник

2016-09-26 18:30:34

Привязать к динамически добавленному содержимому БЕЗ jquery?

ответ

Смежные вопросы