Событие по клику
Пример
Выполнение JavaScript при нажатии кнопки:
<button onclick="myFunction()">Click me</button>
Определение и использование
Событие onclickпроисходит, когда пользователь нажимает на элемент.
В HTML:
<element onclick="myScript">
В JavaScript:
object.onclick = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("click", myScript);
Технические детали
| Пузыри: | да |
|---|---|
| Отменяемо: | да |
| Тип события: | Событие мыши |
| Поддерживаемые HTML-теги: |
Все, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title> |
Дополнительные примеры
Нажмите <кнопку>, чтобы отобразить дату:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Щелкните элемент <h3>, чтобы изменить цвет текста:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Еще один пример того, как изменить цвет элемента:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Нажмите, чтобы скопировать текст из одного поля ввода в другое:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Как назначить событие «onclick» объекту окна:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Используйте onclick для создания раскрывающегося списка:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Связанные страницы
Учебник по JavaScript: События JavaScript
Справочник по HTML DOM: событие ondblclick
Справочник по HTML DOM: событие onmousedown
Справочник по HTML DOM: событие onmouseup
Поддержка браузера
onclickявляется функцией DOM уровня 2 (2001 г.).
Он полностью поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |