Один из лучших способов выучить язык — смириться с многократными неудачами.
— 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* } }
Когда я обнаружил, что событие было запущено, и фактические объекты удалялись из базы данных, я был очень взволнован. Я обязательно сделал заметку о том, насколько удивительны родительские узлы.