Один из лучших способов выучить язык — смириться с многократными неудачами.

— me.

Я создаю одностраничное приложение с внешним интерфейсом Javascript и внутренним API Ruby on Rails. Я обнаружил, что у меня больше всего проблем с присоединением event listener к элементу.

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

Я хотел прикрепить событие к кнопке удаления. Для этого требовалось понимание узлов или элементов HTML.

Родительский узел

Я хотел прикрепить прослушиватель событий к элементу кнопки удаления, а именно:

<input type=”submit” name=”delete”  class="delete" value=”Delete Project”>

Все, что я думал, что мне нужно сделать, это выбрать элемент или узел следующим образом:

let deleteButton = document.getElementByClassName("delete")

а затем прикрепите прослушиватель событий, например:

deleteButton.addEventListener("click", (event) => {
   *insert necessary code here*
}

Что ж, это не сработало. Когда я нажал на кнопку, ничего не произошло. Совершенно ничего. Ничего не запустилось. Почему? Ну, я бы хотел сказать так: я не спрашивал разрешения у родительского узла.

Элемент кнопки удаления является вложенным узлом, то есть дочерним узлом. Что есть у ребенка? Родитель.

Мне нужен родительский узел или родительский элемент, чтобы получить доступ к кнопке удаления. Здесь необходим родительский узел:

<div class="div3" id="projects-container">

Мне нужно было получить «разрешение», чтобы получить доступ, потому что элемент, к которому я хотел получить доступ, был вложен во все это:

<div>
  <ul>
    <li>
      <h2>
      <h3>
      <h3>
      <h4>
      <p>
      <input>
    </li>
  </ul>
</div>

Поэтому я выбрал элемент <div>, он же родительский узел:

const projectParentNode = document.getElementById('projects-container')

затем я прикрепил прослушиватель событий к выбранному родительскому узлу, например так:

projectParentNode.addEventListener('click', (event) => {
   *insert important code here*
}

Теперь я должен «спросить разрешения»:

projectParentNode.addEventListener('click', (event) => {
   let deleteEvent = event.target.className // asking permission
   if(deleteEvent === 'delete') { // still asking permission
        *insert extremely triggering and important code here*
   }
}

Когда я обнаружил, что событие было запущено, и фактические объекты удалялись из базы данных, я был очень взволнован. Я обязательно сделал заметку о том, насколько удивительны родительские узлы.