В этом руководстве будет определена процедура установки onClick с помощью JavaScript.
Как установить onClick с помощью JavaScript
Чтобы установить по щелчку с JavaScript есть два разных метода, а именно:
- Первый метод заключается в присвоении значения элементу HTML. по щелчку атрибут с помощью JavaScript.
- Второй метод заключается в явном добавлении прослушивателя событий к событию HTML, который проверяет наличие « нажмите ' мероприятие.
Пример 1. Присвоение значения атрибуту onclick HTML-элемента с помощью JavaScript
В файле HTML создайте заголовок и кнопку « Нажми на меня 'с идентификатором' js », который вызовет функцию JavaScript при нажатии на нее.
< h2 > Установлен Свойство onClick с JavaScript h2 >
< идентификатор кнопки знак равно 'JS' > Нажми на меня кнопка >
На следующем шаге будет открыт доступ к созданной кнопке и « по щелчку ” атрибут будет прикреплен к нему. По нажатию кнопки будет выполнена указанная функция и появится « стиль.backgroundColor » изменит цвет кнопки следующим образом:
документ. получитьэлементбиид ( 'JS' ) . по щелчку знак равно функция jsFunc ( ) {
документ. получитьэлементбиид ( 'JS' ) . стиль . фоновый цвет знак равно 'Пурпурный' ;
}
Соответствующий вывод будет:
Пример 2. Явное добавление прослушивателя событий к событию HTML
Создать кнопку « Кликните сюда! ' и присваивает идентификатор ' мероприятие ” к нему, который вызовет метод addEventListener() на «щелкнуть» мероприятие:
< идентификатор кнопки знак равно 'мероприятие' > кликните сюда ! сильный > кнопка сильный >>
Получить кнопку, используя ее я бы а затем прикрепите « добавить прослушиватель событий () ', передав ' нажмите 'событие и функция' eventFunc », где будет изменен цвет фона кнопки:
документ. получитьэлементбиид ( 'мероприятие' ) . addEventListener ( 'щелкнуть' , функция события ) ;функция eventFunc ( ) {
документ. получитьэлементбиид ( 'мероприятие' ) . стиль . фоновый цвет знак равно 'Зеленый' ;
}
Выход
Пример 3. Использование всех методов onClick одновременно
В этом примере будет отображаться работа всех методов одновременно. Во-первых, это способ по умолчанию добавить атрибут onclick в сам HTML-тег. После этого также были продемонстрированы два способа установки атрибута onclick с помощью JavaScript.
В следующем примере создайте три кнопки и посмотрите, как работает атрибут onclick.
- Первая кнопка ' Нажмите ” вызовет “ htmlФункция() ” в событии клика.
- Кнопка ' Нажми на меня ” будет доступен с присвоенным ему идентификатором ” js », а затем присвойте значение атрибуту onclick кнопки с помощью JavaScript.
- Кнопка ' Кликните сюда! ” будут доступны с использованием идентификатора ” мероприятие ', а затем прикрепите ' добавить прослушиватель событий () ” метод с ним:
< идентификатор кнопки знак равно 'JS' > Нажми на меня кнопка >< бр >< бр >
< идентификатор кнопки знак равно 'мероприятие' > кликните сюда ! кнопка >
Приведенная ниже функция вызовет « по щелчку » событие кнопки « Нажмите ”:
функция htmlFunc ( ) {тревога ( 'Кнопка, нажатая событием HTML onClick' ) ;
}
При нажатии на « Нажми на меня », сработает следующая функция, при которой будет отображаться предупреждающее сообщение.
документ. получитьэлементбиид ( 'JS' ) . по щелчку знак равно функция jsFunc ( ) {тревога ( 'Кнопка, нажатая функцией JavaScript onClick' ) ;
}
Данная функция вызовет срабатывание кнопки « Кликните сюда! ”:
документ. получитьэлементбиид ( 'мероприятие' ) . addEventListener ( 'щелкнуть' , функция события ) ;функция eventFunc ( ) {
тревога ( «Кнопка, нажатая JavaScript onClick с методом EventListener» ) ;
}
На выходе будут отображаться предупреждающие сообщения при каждом нажатии кнопки:
Вывод
Чтобы установить onclick с помощью JavaScript, существует два разных подхода: первый — присвоить значение атрибуту onclick HTML-элемента с помощью JavaScript, а второй подход — явно добавить прослушиватель событий в событие HTML, который проверяет наличие « нажмите ' мероприятие. В этом руководстве определены методы для установки onClick с помощью JavaScript вместе с примерами.