QA Fest — конференция №1 по тестированию и автоматизации. Финальная программа уже на сайте >>
×Закрыть

Обработка клика по button, тонкие различия с input type=button

Доброго дня, уважаемые гуру веб-разработки и властители браузеров.

Не могу разобраться в тонкостях <button> и <input type=button>

Упражняюсь в создании простого калькулятора.

Делал обработку нажатий кнопок типа <input type=button> через событие дива onclick в котором все эти кнопки лежат. в этом случае обработкой события для дива выяснял на какой конкретно кнопке был клик через
e.target.value и вызывал нужную логику.
Если в слое лежат кнопки типа <button> этот подход уже не работает. браузер обрабатывает onclick но в e.target.value пусто

В документации на <button> ничего не нашел. Может кто-то подсказать как выяснить нажатую кнопку через div?

Варианты с обработкой:
через <input type=button> statehack.esy.es
через <button> statehack.esy.es/calc.html

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Кнопки типа <button> можно обработать, слушая события на внешнем контейнере, а затем уже определять, какая кнопка была нажата и прописывать соответствующее поведение:

document.querySelector('.buttons').addEventListener('click', function(event) {
            event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.tagName === 'BUTTON') {
                alert('<button> with value \"' + target.innerText + '\" was clicked'); 
                switch (target.innerText) {
                    case ('+'):
                        // do something
                       break;
                    case ('='):
                        // do something
                       break;
                }
            }
        }, false);

все правильно делаете. не стоит навешивать кучу обработчиков, если можно обойтись одним. А кнопки я бы идентифицировал атрибутом data-action или data-value. Тогда все равно инпут это или кнопка или вы вообще картинки, обернутые в \<a\> используете.

все правильно делаете. не стоит
создавать кучу переменныъ, если можно обойтись одним большущим массивом...

Автор, тебе должно это помочь — learn.javascript.ru/...vent-delegation

1. Как уже было сказано, можно повесить события на сами кнопки, причём необязательно на каждую в отдельности.
2.

но в e.target.value пусто
потому-что у input есть value, а у button нету.
3.
Может кто-то подсказать как выяснить нажатую кнопку через div
В данном случае это e.target.innerHTML, т.к. текст находится внутри элемента.

А нащо слухати клік діва, якщо можно до самої кнопки додати клас чи id і підписатись на цю подію?

в литературе пишут, что это неэффективно — вешать обработчик на каждую кнопку, поскольку при этом сильно расходуются системные ресурсы, и как я понял рекомендуется обрабатывать клики именно на контейнере, в данном случае div

а разве на див нельзя добавить айди ? можна конечно класс подцепить и через jQuery потом вытаскивать значение текста, но как это в джаваскрипте делать я сходу не помню.

Так, ти правий, це називається делегуванням подій.

Раджу прочитати книгу, яка дуже класно освітлює основні аспекти мови.
Персонально мені вона подобається найбільше:
Professional JavaScript for Web Developers

Ось цитата звідти відносно делегування

In JavaScript, the number of event handlers on the page directly relates to the overall performance of
the page.
This happens for a number of reasons.
The first is that each function is an object and takes up memory;
the more objects in memory, the slower the performance.
Second, the amount of DOM access needed to assign all of the event handlers up front delays the interactivity of the entire page.

The solution to the “too many event handlers” issue is called event delegation.

поскольку при этом сильно расходуются системные ресурсы
Сомнительно. Может 15 лет назад это и имело место быть и было критичным. Сейчас — нет. Думайте лучше об удобной архитектуре, а не об экономии ресурсов. Используйте хотя бы jQuery, навешивайте обработчики так, как это удобно делать для конкретной задачи. Если несколько элементов имеют одинаковый обработчик, но в нём надо знать что за элемент его вызвал — используйте кастомные аттрибуты, как советовали выше:
А кнопки я бы идентифицировал атрибутом data-action или data-value

правильно пишут, но сильно расходоваться ресурсы у вас будут если нужно повесить эвент на 100500 элементов, а с двумя кнопками можно и по старинке.

Будь-які тестові завдання не передбачають 100500 елементів, і в них завжди можна схалявити, продумати більш криві алгоритми і це абсолютно не відобразиться на перфоменсі.
Але звідки брати знання початківцю про те які правила розробки у високонавантажених проектах?
І що важливіше де їх відточувати?
Думаю якщо це робити на 2 ’todo’ апах, то лишнім це не буде))

Подписаться на комментарии