event listeners in js

event_listeners_js

Написать событию в jquery очень просто понятно, давайте напишим .

$('#button').on('click', function (event) {
        alert(1);
    });

Это можно написать и в голом  javascript  без всякого jquery, получить элемент по селектру и навешиватся на событию onclick

 document.getElementById('button').addEventListener('click', function (event) {
        alert(1);
    });

Соответственно если мы присваиваем переменную button, то мы можем на эту кнопку навешивать несколько обработчиков и вывести информацию о кнопке

    var button = document.getElementById('button');
    
    button.addEventListener('click', function (event) {
        alert(button.innerText);
    });
    button.addEventListener('click', function (event) {
        alert(button.innerText);
    });

При таком подходе можно  обработчик присваивать переменную ` некому слушателю,  анонинмную функцию , чтобы два раза не написать.

var listener = function (event) {
        alert(button.innerText);
    });

    button.addEventListener('click', listener);
    button.addEventListener('click', listener);

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

    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');

    var listener = function (event) {
        alert(button.innerText);
    });

    button1.addEventListener('click', listener);
    button2.addEventListener('click', listener);

Чтобы получить именно ту кнопку по которой мы кликнули, мы можем из event а достать свойтсва target и  решить эту проблему

var listener = function (event) {
        alert(event.target.innerText);
    });

И так мы может создать несколько разных слушателей и навещать разных кнопок разные слушатели.Вот для чего этот подход придуман и где удобно использовать.
Вот для чего такой подход событиями вообще придуман и где он удобен где он успешно выполняется.Он удобен именно в таких вещах как в программах именно визуальным интерфейсом .
Данном случае мы рассматриваем javascript, котором html  странице есть кнопки и вообще непонятно когда кто по какой кнопке кликнит.
Зачем такой подход  использовать в php  или других языках который не имеет никакого визуального интерфейса а просто являются скриптами . На самом деле и  в php это имеет некий смысл . 

 

следующая статья >>

Комментарий