Несколько слушателей событий - PullRequest
Новая
       16

Несколько слушателей событий

0 голосов
/ 17 июня 2019

ОК, поэтому у меня есть следующие вопросы:

Должен ли я добавить прослушиватель событий непосредственно в parent element (модальное всплывающее окно), где этот элемент имеет 3 buttons (2 для закрытия вкладки, 1для отправки данных).

И в listener function для присвоения некоторого class methods подобного и манипулирования всей функциональностью (отправки данных и отображения интерфейса): 

document.getElementById('weather-modal-container').addEventListener('click', modal);

function modal(e) {
  ui.closeModal(e);
  weather.submitData();
  e.stopPropagation();
}

Или я должендобавьте 2 click listeners к родительскому элементу, один для закрытия модального режима и один для отправки данных. 

document.getElementById('weather-modal-container').addEventListener('click', closeModal);
document.getElementById('weather-modal-container').addEventListener('click', submitData);

Или один слушатель непосредственно к parent element для манипулирования UI и другой слушатель длякнопка, которая находится внутри контейнера. 

document.getElementById('weather-modal-container').addEventListener('click', closeModal);
document.getElementById('button-inside-container').addEventListener('click', submitData);

Ответы [ 2 ]

1 голос
/ 18 июня 2019

Хорошо, а как насчет только одного прослушивателя событий для All? 

const MyDialog = document.querySelector('#weather-modal-container')

MyDialog.onclick=e=>{
  let role = e.target.dataset.role
  if (role)
  {
    e.preventDefault()

    console.clear()
    console.log (role)
    
    switch (role){
      case 'submitData':
        console.log ('something is :', MyDialog.something.value)
        // stuff about submiting data
        break;
      case 'closeModal':
        // stuff about close modal
        break;
    }
  }
}
#weather-modal-container { display: block; width: 30em; padding: 1em; border: 1px solid grey;}
a[data-role] { color: red; float: right;}

#weather-modal-container button { float: right; margin: 0 .3em 0 0 }
<form id="weather-modal-container">
  <a href="#" title="closeModal" data-role="closeModal">X</a>

  <p>Bla bla bla bla</p>
  <input type="text" placeholder="with something" name="something" value="hello">

  <a href="https://en.wikipedia.org" title="wikipedia" > wikipedia</a>
  <br>
  <button data-role="submitData">Send</button>
  <button data-role="closeModal">Cancel</button>
</form>
0 голосов
/ 17 июня 2019

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

т.е. 

if(event.target.id == 'button-inside-container') {
    // do something
}

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

...