В этом блоге я попытаюсь разъяснить основы механизма обработки событий в JavaScript без помощи какой-либо внешней библиотеки, такой как Jquery / React / Vue.
В этой статье я буду объяснять следующие темы:
- Объекты документ и окно и добавление к ним прослушивателей событий.
- Метод Event.preventDefault () и его использование.
- Метод Event.stopPropagation () с примером.
- Как удалить прослушиватель события из элемента.
Объекты Document и window с прослушивателями событий
Объект Window представляет вкладку. Если вы читаете этот блог в соответствующем браузере, ваша текущая вкладка представляет объект Window.
Объект окна имеет доступ к такой информации, как панель инструментов, высота и ширина окна, подсказки и предупреждения. Давайте посмотрим, как мы можем добавить прослушиватель событий (mousedown) к объекту окна и проанализировать некоторые его свойства.
Как добавить слушателя к объекту окна
Метод addEventListener является наиболее предпочтительным способом добавления прослушивателя событий в окно, документ или любой другой элемент в ДОМ.
Есть еще один способ - свойство onclick, onmouseover и так далее. Но это не так полезно, поскольку не позволяет нам добавлять несколько прослушивателей событий к одному и тому же элементу. Другие методы позволяют это.
Объект event передается обработчику в качестве аргумента (необязательно), который содержит всю информацию, относящуюся к событию (в нашем случае, mousedown) в окне.
Откройте инструменты разработчика (Inspect Element) на этой странице, скопируйте и вставьте следующий код в панель консоли и нажмите Enter.
window.addEventListener("mousedown",function(event){
alert("window");
console.log(event);
});
После этого вы можете перейти в любой раздел текущей вкладки и щелкнуть правой кнопкой мыши, чтобы увидеть консоль и информацию, относящуюся к этому событию, как показано на снимке ниже.
Примечание: если вы перейдете на любую другую вкладку и щелкните правой кнопкой мыши, это событие не будет запущено, поскольку оно принадлежит только этой вкладке (объекту окна).
Подробности события mousedown
В следующих нескольких строках я объясню некоторые важные захваченные свойства, соответствующие только что выполненному нами событию mousedown.
кнопка: так как это было событие mousedown, оно сообщит вам о кнопке, которую вы нажали. Для мыши левый, средний и правый соответствуют 0, 1 и 2 соответственно. Если вы нажмете правую кнопку, вы увидите значение 2.
clientX и clientY: положение относительно верхнего левого угла области содержания (области просмотра). Просто проанализируйте ценность этих свойств с местом, на которое вы нажали, и вы увидите, как они связаны. Даже если вы прокрутите страницу вниз, эти свойства останутся прежними. Ссылка на ScreenX и ScreenY в верхнем левом углу экрана (Монитор).
altkey / ctrlkey: если вы удерживаете нажатой любую из этих клавиш при выполнении операции щелчка правой кнопкой мыши, вы увидите, что эти значения верны. В противном случае они ложные, как в нашем случае.
target: соответствует элементу, над которым вы выполнили действие. Какой бы элемент вы ни щелкнули, вы можете увидеть информацию, соответствующую этому свойству, в консоли.
Что такое объект документа?
Документ состоит из того, что находится внутри внутреннего окна. объект документа является корнем каждого узла в DOM. Если вы загружаете HTML-страницу в браузере, тогда документ представляет эту страницу целиком.
Метод Event.preventDefault () и его использование
Иногда мы не хотим, чтобы HTML-элемент вел себя так, как должен вести себя по умолчанию. В таком случае мы можем использовать этот метод.
Пример. При нажатии на элемент привязки браузер по умолчанию выполняет перенаправление на эту страницу. Попробуем этого избежать.
<html> <body> <a href="https://google.com/">Google</a> <script> let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event){ console.log("Redirecting Stopped"); event.preventDefault(); }); </script> </body> </html>
Вы можете создать HTML-файл и проверить этот код.
Метод Event.stopPropagation ()
События перетекают вовне. Есть определенные случаи, например, когда у вас есть вложенные элементы, и вы выполняете какое-то событие над дочерним элементом, и в итоге оно также выполняет какое-то действие над родительским, чего вы хотите избежать. В таких случаях этот метод полезен.
Это звучит немного запутанно, но я надеюсь, что приведенный ниже пример прояснит вам это.
Представьте, что у вас есть кнопка внутри абзаца, и вы прикрепили событие mousedown к ним обоим. Вы хотите реализовать следующие варианты использования:
- Если вы щелкните кнопку правой кнопкой мыши, она должна показать, что она была нажата и не распространяется на родительский элемент (то есть абзац).
- Если вы щелкнете левой кнопкой мыши по кнопке, она должна нормально распространиться наружу и также запустить прослушиватель событий абзаца.
Решение:
<html>
<body>
<p id="demo"> Hello Ho<button id="button12"> Button2 </button> </p>
<script>
// Event Listener on the Button and it's logic
document.getElementById("button12").addEventListener("mousedown",function(event){
alert("button clicked");
if(event.button == 2 ) // Right Click
event.stopPropagation();
});
// Event Listener on the paragraph element with it's logic:
document.getElementById("demo").addEventListener("mousedown",function(event){
alert("Paragraph clicked");
});
</script>
</body>
</html>
Удаление прослушивателя событий из элемента
Чтобы удалить прослушиватель событий из элемента, нам нужно вызвать метод removeEventListener с именем события и именем функции.
Примечание: когда передаются анонимные функции, у них нет отображения памяти. Поэтому нам нужно определить эти функции вне обратного вызова, а затем сослаться на них здесь, в обратном вызове removeEventListener.
Document.getElementbyId("id_name").removeEventListener("click",fn_name)
Если вы достигли этой точки, вы должны иметь хорошее представление о том, как работают прослушиватели событий в JavaScript.
Если во время работы с вашей любимой библиотекой / фреймворками вы когда-нибудь застряли в части обработки событий, эти основы должны помочь вам решить проблему.
