Onclick в javascript примеры

На onclick можно повесить вообще любое событие, какое только можно придумать! Рассмотрим несколько вариантов реализации onclick, каждый из этих способов клика по кнопке используются по необходимости, либо по предпочтению!

Навигация по странице :

1. Синтаксис : Onclick в HTML
2. Пример: Onclick в HTML
3. Синтаксис : Onclick в JavaScript
4. Пример: Onclick в JavaScript
5. Синтаксис :Onclick В JavaScript, используя метод addEventListener()
6. Пример:Onclick В JavaScript, используя метод addEventListener()
7. Еще примеры использования Onclick

Синтаксис : Onclick в HTML

<element onclick="Script">



Пример: Onclick в HTML

Для иллюстрации работы onclick нам понадобится блок - это будет div, вовнутрь помещаем onclick, внутри onclick равно двойные кавычки и туда помещаем alert, а уже там используем одинарные кавычки - иначе это не будет работать и будет выдавать ошибку в консоль! И помести уже в алерт, како-то текст:

<div onclick="alert(' Щелчок мыши!')"> Щелкните мышью на тексте</div> 

Нажмите на текст...

Нажми на меня - проверь работу onclick в действии!



Синтаксис : Onclick в JavaScript

object.onclick = function(){Script};



Пример: Onclick в JavaScript

4. С Onclick в HTML было просто и понятно, но как понять теперь второй способ использования onclick. Первое, что вас наверное смущает это : object

Чтобы это понять, нам понадобится кнопка... button

<button id="onclick_v_javascript">Это второй способ реализации Onclick в JavaScript</button>
Можно было обратиться к тегу(button), но на странице их будет несколько, поэтому обратимся к id с помощью querySelector-a

document.querySelector("#onclick_v_javascript").onclick = function(){alert("Это второй способ реализации Onclick в JavaScript");};

Соберем все вместе:

<button id="onclick_v_javascript">Это второй способ реализации Onclick в JavaScript</button>

<script>document.querySelector("#onclick_v_javascript").onclick = function(){alert("Это второй способ реализации Onclick в JavaScript и вывод через alert");}; </script>

Результат:

Это второй способ реализации Onclick в JavaScript



Синтаксис : В JavaScript, используя метод addEventListener()

object.addEventListener("click", Script);



Пример:Onclick В JavaScript, используя метод addEventListener()

6. И последний элемент теории Onclick - использование метода addEventListener

Нам опять понадобится кнопка

<button id="onclick_v_addEventListener">Это второй способ реализации Onclick в JavaScript</button>

Опять применяем querySelector - обращаемся к нашей кнопке, добавляем метод addEventListener, во внутрь помещаем событие click И второй параметр - это функция myFoo.

document.querySelector("#onclick_v_addEventListener") .addEventListener("click", myFoo);

Далее нам понадобится функция:

function myFoo() { alert("Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert"); }

Соберем весь код вместе:

<button id="onclick_v_addEventListener">Это третий способ реализации Onclick в JavaScript</button>

<script>

document.querySelector("#onclick_v_addEventListener") .addEventListener("click", myFoo);

function myFoo()

{

alert("Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert");

}

</script>

Результат:

Это третий способ реализации Onclick в JavaScript



Еще примеры использования Onclick

В качестве примера рекомендую - страницу с кнопками - все события производится именно кнопками, на которых повешено событие onclick.

1.

пример onclick.

Ну что.. давайте провесим на onclick, какое-то действие, самое простое - показать время.

Нажмите по кнопке...

Сколько времни!?

Как сделать в onclick два события!?

2.

Не буду выделять в отдельную страницу…

Нередко встречаются такие ситуации, что на onclick требуется повесить больше одного события, например два события в onclick или по-другому две функции при одном нажатии будет выполняться два и больше событий, столько, сколько выв вообще захотите.

Пример два события по одному нажатию на кнопку – давайте соединим два верхних примера в одно нажатие onclick

Два события. 3.

Изменить цвет текста onclick!?

Если , например нужно изменить где-то цвет, то можно посмотреть пример с помощью onclick

Код:

Результат:

Изменить цвет

4.

onclick и функция!?

Например, когда надо много событий навесить в onclick, то можно навесить на onclick только функцию, а в функции написать функцию, которая и будет выполнять все, что нужно при нажатии на кнопку...

Далее изменение текста и одновременное изменение цвета.

Код:

Результат:

Нажми здесь

Не забудь ! Теги:
onclickonclick idonclick functiondocument onclickonclick varonclick actiongetelementsbyclassname onclickonclick if elsediv onclickonclick javascriptonclick returnonclick две функцииonclick джаваскрипт примеры