Событие 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>