Событие JavaScript по клику
Событие onclick обычно происходит, когда пользователь щелкает элемент. Это позволяет программисту выполнять функцию JavaScript при нажатии на элемент. Это событие можно использовать для проверки формы, предупреждающих сообщений и многого другого.
Используя JavaScript, это событие может быть динамически добавлено к любому элементу. Он поддерживает все элементы HTML, кроме <html>, <head>, <title>, <style>, <script>, <base>, <iframe>, <bdo>, <br>, <meta> и <param>. Это означает, что мы не можем применить событие onclick к указанным тегам.
В HTML мы можем использовать атрибут onclick и назначить ему функцию JavaScript. Мы также можем использовать метод JavaScript addEventListener() и передавать ему событие клика для большей гибкости.
Синтаксис
Теперь мы видим синтаксис использования события onclick в HTMLи в javascript(без метода addEventListener() или с использованием метода addEventListener() ).
В HTML
<element onclick="fun()">
В JavaScript
object.onclick = function() { myScript };
В JavaScript с помощью метода addEventListener()
object.addEventListener("click", myScript);
Давайте посмотрим, как использовать событие onclick, используя некоторые примеры. Теперь мы увидим примеры использования события onclick в HTML и в JavaScript.
Пример 1. Использование атрибута onclick в HTML
В этом примере мы используем атрибут HTML onclickи назначаем ему функцию JavaScript. Когда пользователь нажимает данную кнопку, запускается соответствующая функция, и на экране отображается диалоговое окно с предупреждением.
<html>
<head>
<title>Document</title>
<script>
function fun() {
alert("привет мир");
}
</script>
</head>
<body>
<button onclick="fun()">жми на меня</button>
</body>
</html>
Пример 2 — Использование JavaScript
В этом примере мы используем событие JavaScript onclick . Здесь мы используем событие onclick с элементом абзаца.
Когда пользователь нажимает на элемент абзаца, выполняется соответствующая функция, и текст абзаца изменяется. При нажатии на элемент <p> цвет фона, размер, граница и цвет текста также изменятся.
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="para">кликни на меня</p>
<script>
document.querySelector("#para").onclick = function() {
fun()
};
function fun() {
document.querySelector("#para").innerHTML = "ты нажал(а)";
document.querySelector("#para").style.color = "blue";
document.querySelector("#para").style.backgroundColor = "yellow";
document.querySelector("#para").style.fontSize = "25px";
document.querySelector("#para").style.border = "4px solid red";
}
</script>
</body>
</html>
Пример 3. Использование метода addEventListener()
В этом примере мы используем метод JavaScript addEventListener() , чтобы прикрепить событие клика к элементу абзаца. Когда пользователь щелкает элемент абзаца, текст абзаца изменяется.
При нажатии на абзац цвет фона и размер шрифта элементов также изменятся.
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="para">кликни на меня</p>
<script>
document.querySelector("#para").addEventListener("click", function() {
document.querySelector("#para").innerHTML = "ты нажал(а)";
document.querySelector("#para").style.color = "blue";
document.querySelector("#para").style.backgroundColor = "yellow";
document.querySelector("#para").style.fontSize = "25px";
document.querySelector("#para").style.border = "4px solid red";
})
</script>
</body>
</html>