Как грамотно задать элементу событие onclick

Question

Обратите внимание на html разметку, меня интересует как правильно задать onclick элементу. Сделал три варианта, они все работают. В силу того, что я недавно начал изучение JS, я не могу понять какой из этих вариантов более грамотный.

function one(){
alert('Do you like, what you see?')
}

function two(){
alert('1000-7')
}

let three = document.querySelector('.block3');

three.onclick = function (){
alert('It gets bigger, when i pull on it');
}

.block1{
margin-top:10px;
padding:10px;
border: 3px solid black;
}

.block2{
margin-top:10px;
padding:10px;
border: 3px solid black;
}

.block3{
margin-top:10px;
padding:10px;
border: 3px solid black;
}

<div class ="block1" onclick ="one()"> 1 вариант </div>  <!-- 1 вариант  -->
<div class ="block2" onclick = two() > 2 вариант </div>  <!-- 2 вариант  -->
<div class ="block3"> 3 вариант </div>                   <!-- 3 вариант  -->

Answer 1

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

const message = msg => {
  switch (msg) {
    case `one`:
      return `Do you like, what you see?`;
    case `two`:
      return `1000-7`;
    case `three`:
      return `It gets bigger, when i pull on it`;
    default:
      return `Ошибка`;
  }
}

addEventListener(`click`, e => {
  const $target = e.target.closest(`.block`);
  if (!$target) return;

  alert(message($target.dataset.alert));
})

.block {
  margin-top: 10px;
  padding: 10px;
  border: 3px solid black;
  cursor: pointer;
}

<div class="block" data-alert="one"> 1 вариант </div>
<div class="block" data-alert="two"> 2 вариант </div>
<div class="block" data-alert="three"> 3 вариант </div>
<div class="block"> неопознанный вариант </div>

Answer 2

По клику был дан ответ, но я объясню.

Инициализация переменной: const переменная = document.функцияВыборки(Вызов с нужным параметром); 


init: const buttonRight = document.querySelector('.buttonRight');

Следующим шагом мы должны подписаться на событие у нашего элемента.

:exp: элемент.функцияПодпискиНаСобытие(нужный параметр-событие () => вызов функции, которая отработает в момент события);  


:exp: buttonRight.addEventListener('event', (e) => main(e));

Уточню, что в данном случае мы слушаем событие у фрагмента типа element.

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

Есть более устаревшая/ситуативная вариация с записью.

:exp: buttonRight.addEventListener('click', (e) => {console.log(e);}); 
:exp: buttonRight.addEventListener('click', fc);  
:exp: buttonRight.addEventListener('click', function() {});

Пишем функцию внутри обработчика.
Вызываем функцию внутри обработчика без параметров.
Пишем не стрелочную функцию внутри обработчика.

Теперь решим вашу задачу:

const DATAONE = "one";
const DATATWO = "two";
const DATATHEREE = "three";

addEventListener(`click`, e => {
  const block = e.target.closest(`.block`);

  if (!block) {
    return alert("Error");
  }

  const { alert: dataset } = block.dataset;
  if (DATAONE === dataset) {
    return alert(DATAONE);
  } else if (DATATWO === dataset) {
    return alert(DATATWO);
  } else if (DATATHEREE === dataset) {
    return alert(DATATHEREE);
  }
});

<div class="block" data-alert="one"> 1 вариант </div>
<div class="block" data-alert="two"> 2 вариант </div>
<div class="block" data-alert="three"> 3 вариант </div>

БЛОГ НА HUSL

Как грамотно задать элементу событие onclick

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