Пример - onclick

            
test your mouse on me
            

        

            var btnNode = document.querySelector('.test');
            var outputNode = document.querySelector('.output');

            function clickHandler(){
                outputNode.innerHTML += "You have clicked with left mouse button
"
            }
        

Test it on codepen

See the Pen Example - onclickHandler by Iva Popova (@webdesigncourse) on CodePen.

Разбира се, освен генерирани от потребителя събития, в DOM са специфицирани и други събития, като Network Events, Progress Events, Storage events и пр.

Example - Network Events in codepen

See the Pen Example - Network Events by Iva Popova (@webdesigncourse) on CodePen.

Можем да асоциираме събитие с JavaScript код, като използваме HTML Event атрибути

            <tagname eventAttribute = "JavaScript code">
        

където eventAttribute е някой от HTML Event атрибутите, посочени тук: HTML Event Attributes

A JavaScript code е кодът, който ще се изпълни автоматично при настъпване на даденото събитие

Този начин за асоцииране на събитие към елемент е лесен за използване (и подходящ за навлизане в темата), но както ще видим в следващите слайдове има и доста ограничения, поради това не се препоръчва да се използва в реални приложения.

Пример

            // асоциираме 'onclick' event с P елемента:
            
click me

            // асоциираме 'ondblclick' event с P елемента:
            
double click me
        

Когато използваме this в стойността на ивент атрибут, то в this имаме обекта, представят съответния елемент.

Естествено, много по-удобно и ефективно е вместо да пишем JavaScript код в HTML атрибут, да го обособим като функция

В практиката, функции, които дефинираме, за да бъдат извикани при настъпване на даден ивент, наричаме event handlers

            
double click me
        

            function clickHandler( node ){
                node.innerHTML = "Bravo, you have clicked!"
            }
        

Тук трябва да извикаме функцията експлицитно, тъй като единственото, което ще направи браузера е да изпълни JavaScript кода подаден в атрибута 'onclick', когато даденото събитие настъпи.

Пример за промяна на изображение, при промяна на опция

В примера са използвани следните пропъртита за навигиране в DOM дървото. Забележете, че те работят с Еlement Object, като не включват Text и Comment обекти:

parentElement

previousElementSibling

children

Разгледайте примера локално, на вашата машина под VSCоde, за да може лесно да следите HTML структурата и операциите с JS върху нея.

See the Pen changeImageOnSelectChange_EventAttributesDemo by Iva Popova (@webdesigncourse) on CodePen.

Обработването на събития в самия HTML, макар и лесно за разбиране и използване има няколко недостатъка:

нарушава принципа на "разделяне на отговорностите" (separation of concerns)

Не позволява да асоццираме динамично събитие

Не позволява да премахнем динамично дадено събитие, коеото в дадени ситуации е необходимо за да увеличим бързодействието на сайта.

Предпочитания метод за асоцииране на събитие е чрез DOM метода addEventListener(), разгледан в следващите слайдове.

            element.addEventListener(eventName, functionDefinition [, options])
        

където eventName e име на събитие (без "on" префикс)

DOM Events @w3schools

functionDefinition е дефиниция на функцията (нарича се оше "callback функция"), която ще се изпълни при настъпване на събитието. Много често се използва анонимна функция.

options не е задължителен параметър. Чрез него задаваме допълнителни характеристики за самото събитие

Example - addEventListener() method on codepen

See the Pen Example - addEventListener() method by Iva Popova (@webdesigncourse) on CodePen.

Важно е да се разбере, че функцията (анонимна или не), чиято дефиниция поддаваме като аргумент на метода addEventListener ще се извика от този метод едва при настъпването на събитието!

Честа грешка е ние да извикваме функцията:

                var clickHandler = function() {
                    console.log('click')
                };

                // тук ще подадем на addEventListener не нашата функция - clickHandler, а резултата от нея (в случая - undefined), а самата функция clickHandler() ще бъде извикана моментално:
                document.body.addEventListener( "click", clickHandler() );
            

Задача

Направете следната страница, с посочената функционалност:

Забележете, че LI елементите се добавят в началото на списъка. За целта може да използвате DOM метода: insertBefore()

Информацията за настъпилото събитие се съхранява в обект от тип Event Object

Event обекта се подава като аргумент на handler функцията

See the Pen simpleEventObjectDemo by Iva Popova (@webdesigncourse) on CodePen.

Event objects properties

Event обектите от различните групи (mouse events, keyboard events, etc) имат различни, специфични за ивента, свойства, но има и такива свойства, които са общи за всички ивенти.

See the Pen simpleEventPropertiesDemo by Iva Popova (@webdesigncourse) on CodePen.

target vs. currentTarget

Някои от най-често използваните свойства, присъщи на всички event обекти са: target и currentTarget

See the Pen target vs. currentTarget by Iva Popova (@webdesigncourse) on CodePen.

Пример за ефективен код, чрез използване на event.target

See the Pen Using event.target on parent for child actions by Iva Popova (@webdesigncourse) on CodePen.

Пример за промяна на изображение, при промяна на опция

Това е по-добър вариант на разгледания вече пример: changeImageOnSelectChange_EventAttributesDemo, тъй като тук използваме addEventListener()

See the Pen Untitled by Iva Popova (@webdesigncourse) on CodePen.