Блог

Главная - Вопросы по программированию - использование метода addEventListener или onclick для выполнения функции, когда кто-то нажимает на нее?

использование метода addEventListener или onclick для выполнения функции, когда кто-то нажимает на нее?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я практикую события DOM и замечаю, что я могу использовать addEventListener или метод onclick для запуска функции при нажатии на кнопку, но я хочу знать, есть ли какая-либо логическая разница между ними? Что мы должны использовать, когда? Я довольно новичок в программировании.

Вот мой код,

 <!DOCTYPE html>
<html>
    <body>
        <h2>Testing</h2>

        <button id="myBtn-1">BUTTON-1</button>
        <button id="myBtn-2">BUTTON-2</button>

        <p id="demo"></p>

        <script>
            //Event for button 1
            document
                .getElementById('myBtn-1')
                .addEventListener('click', displayDate);

            //Event for button 2
            document.getElementById('myBtn-2').onclick = displayDate;

            //function to get the current date and time
            function displayDate() {
                document.getElementById('demo').innerHTML = Date();
            }
        </script>
    </body>
</html>

Комментарии:

1. onclick= может иметь только одно значение, если вы назначите его дважды, будет вызвано только второе … addEventListener('click', может добавляться много раз, и ВСЕ добавленные обработчики будут вызываться (в зависимости от того, что происходит внутри обработчика)

Ответ №1:

Основное отличие заключается в том, что onclick — это просто свойство. Как и для всех свойств объекта, вам может быть назначено одно встроенное событие. Если вы пишете более одного раза, он будет перезаписан. С другой стороны, addEventListener() может иметь несколько обработчиков событий, применяемых к одному и тому же элементу. Он не перезаписывает другие существующие обработчики событий.

вот хорошая ссылка https://medium.com/@tshlosberg/addeventlistener-vs-onclick-which-one-should-you-use-47550d7e7487