Javascript обработчик события нажатия кнопки

Element: click event

An element receives a click event when a pointing device button (such as a mouse’s primary mouse button) is both pressed and released while the pointer is located inside the element.

If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.

click fires after both the mousedown and mouseup events have fired, in that order.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("click", (event) => >); onclick = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Usage notes

The MouseEvent object passed into the event handler for click has its detail property set to the number of times the target was clicked. In other words, detail will be 2 for a double-click, 3 for triple-click, and so forth. This counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. The interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces.

Examples

HTML

JavaScript

const button = document.querySelector("button"); button.addEventListener("click", (event) =>  button.textContent = `Click count: $event.detail>`; >); 

Result

Try making rapid, repeated clicks on the button to increase the click count. If you take a break between clicks, the count will reset.

Specifications

Browser compatibility

See also

Found a content problem with this page?

This page was last modified on Jun 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Обработчик события кнопки на JavaScript

На предыдущих уроках по JavaScript, мы научились получать и изменять элементы на страницах. Но зачем это нужно, если можно сразу создать страницу с необходимым HTML кодом? Так мы и делаем всегда — сначала создаем статическую страницу, только одного этого недостаточно. Дело в том, что взаимодействие с пользователем происходит при помощи событий мыши или клавиатуры и нам надо как-то реагировать на эти события.

Статичная кнопка

У меня на сайте есть кнопка, при нажатии на которую ничего не происходит. Как заставить кнопку реагировать на клик пользователя (например менять текст на ней)?

#myBtn background-color: #9C27B0;
color: white;
padding: 20px;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
width: 250px;
margin: 20px 200px;
>

Превращение статичной кнопки в интерактивную

Вот теперь нам пригодится навык поиска элементов на странице.

1) Шаг. Получение элемента, событие которого вы хотите обрабатывать.

Мы хотим обрабатывать событие клика на элементе с идентификатором myBtn. Поэтому объявим переменную buttonElem и при помощи метода getElementById сохраним кнопку в эту переменную.

const buttonElem = document.getElementById(‘myBtn’);

2) Шаг. Создание функции, которая будет вызываться при возникновении события «клик».

Создадим функцию с логичным названием onButtonClick. Функция должна заменить текст на кнопке, поэтому пропишем в теле функции выражение, которое изменит содержимое тега button. Обратимся к переменной и через свойство textContent заменим надпись на кнопке. Пока на данном этапе, при нажатии на кнопку ничего не происходит. Ведь браузер еще не знает, какую функцию ему вызывать при после клика на кнопку.

let onButtonClick = function() buttonElem.textContent = ‘Спасибо за клик’
>

3) Шаг. Связать обработчик события с событием клика и элементом.

Должен кто-то отследить событие клика по кнопке и сообщить об этом браузеру. Этот кто-то, называется обработчик событий addEventListener. Повесим на buttonElem метод addEventListener и передадим ему два аргумента: название события «Click» и название функции. Функция будет вызываться, при наступлении указанного события.

Ура! Наш JS код сработал, когда мы нажимаем на кнопку — меняется текст кнопки.

const buttonElem = document.getElementById(‘myBtn’);

let onButtonClick = function() buttonElem.textContent = ‘Спасибо за клик’
>

Как работают функции?

В примере используется функция обратного вызова (callback). Отличается она от обычной функции тем, что вызывается сразу после определенного события. В нашем случае, после события клика. Обычная функция выполняется сразу после загрузки страницы или через указанный интервал времени.

Если было бы нужно вызвать функцию без привязки к событиям, то мы добавили бы следующую строчку. Скобки после названия означают вызов функции без привязки к событиям и тогда текст на кнопке изменится сразу после загрузки страницы.

Если убрать скобки, тогда это будет ссылка на функцию, которую мы передаем вторым аргументом при установки слушателя событий. Мы говорим браузеру, что эту функцию нужно будет вызвать, но только после клика пользователя по кнопке. Поэтому у функции обратного вызова нельзя ставить скобки.

В качестве второго аргумента можно передавать анонимную функцию. Анонимная функция не имеет имени и вместо имени вставляется инструкция (код JavaScript), что делает эта функция.

buttonElem.addEventListener(‘click’, function() buttonElem.textContent = ‘Спасибо за клик’
>);

Анонимная и именованная функция делают одно и тоже и оба варианта рабочие. Большинство разработчиков используют именованные функции, такой код проще читается. Создание обработчика событий не требует написания много строчек кода и вместо события click, можно привязывать другие события к совершенно разным элементам. А базовые принципы изложены в этой статье.

Создано 12.04.2021 10:12:41

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник