1

Столкнулся с проблемой конфликтов JS скриптов.Подсказали что можно реализовать с помощью addEventListener. Как можно реализовать функцию используя addEventListener вместо onclick? Заранее спасибо.

Код Кнопки:

<button id="btn-start-recording">START</button>

Функция:

  var btn = document.getElementById('btn-start-recording'),
    loader = document.getElementsByClassName('loader')[0];

btn.onclick = function() {
    loader.style.display = 'block'; // показываем .loader
    setTimeout(function() {
      loader.style.display = 'none'; // скрываем .loader
    }, 40000); // задержка перед скрытием в миллисекундах
  } 
 

1
  • btn.addEventListener('click', function(){ }); 31 июл 2017 в 16:29

2 ответа 2

3

var btn = document.getElementById('btn-start-recording');

function otherFunction() {
  console.log('function 2');
}

btn.addEventListener('click', function() {
  console.log('function 1');
});

btn.addEventListener('click', otherFunction);
<button id="btn-start-recording">START</button>

Пожалуйста, не ленитесь изучать документацию:

1

addEventListener используется следующим образом:

var btn = document.getElementById('btn-start-recording');

var firstHandler = function firstHandler() {
    console.log('Первый обработчик');
};

var secondHandler = function secondHandler() {
    console.log('Второй обработчик');        
};

btn.addEventListener('click', firstHandler);
btn.addEventListener('click', secondHandler);

Но порядок вызова обработчиков может быть разным, чтобы этого избежать используйте jQuery или аналогичные библиотеки.

Отписаться от обработчиков можно следующим образом:

btn.removeEventListener('click', firstHandler);
btn.removeEventListener('click', secondHandler);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.