Как сделать вызов события по клику через js?

Аватар пользователя Andrey G
Andrey G
08 декабря 2022

Событию click необходимо назначить обработчик, который сработает, как только событие произошло. Назначить обработчик можно разными способами: атрибут HTML, свойство DOM-объекта, addEventListener.

Атрибут HTML

Атрибут имеет вид - on<событие>.

<button onclick="alert('Hello world')">Кнопка</button>

При клике мышкой по кнопке выполнится код, указанный в атрибуте onclick.

Свойство DOM-объекта

Свойство имеет вид - on<событие>.

button.onclick = () => alert('test')

Этот способ аналогичен предыдущему. Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – это один из способов его инициализации.

addEventListener

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. Этот недостаток и решает addEventListener.

Синтаксис

target.addEventListener(type, listener[, options]);

Обязательные параметры

type - чувствительная к регистру строка, представляющая тип обрабатываемого события
listener- функция, которая принимает уведомление, когда событие указанного типа произошло
Метод EventTarget.addEventListener()

<button id="myButton">Кнопка</button>
const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('Hello world'));
button.addEventListener('click', () => alert('Hello Hexlet'));

Введение в события
События на практике

0 0
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки