Событие onclick
Пример onclick
Вызов функции при нажатии кнопки:
<button onclick="myFunction()">Нажми на меня</button>
Попробуйте сами »
Ещё примеры ниже.
Описание onclick
Событие onclick происходит, когда пользователь нажимает на элемент HTML.
События мыши onclick
| Событие | Происходит, когда |
|---|---|
| onclick | Пользователь нажимает на элемент |
| oncontextmenu | Пользователь щелкает правой кнопкой мыши по элементу |
| ondblclick | Пользователь дважды щелкает по элементу |
| onmousedown | Кнопка мыши нажата над элементом |
| onmouseenter | Указатель перемещается на элемент |
| onmouseleave | Указатель перемещения на элементе |
| onmousemove | Указатель перемещения на элементе |
| onmouseout | Указатель перемещения на элементе |
| onmouseover | Указатель мыши перемещается над элементом |
| onmouseup | Кнопка мыши отпущена над элементом |
Связные страницы onclick
Учебник onclick
Синтаксис onclick
В JavaScript, используется метод addEventListener():
object.addEventListener("click", myScript);
Попробуйте сами »
Технические детали onclick
| Bubbles: | Да |
|---|---|
| Cancelable: | Да |
| Тип событий: | MouseEvent |
| Поддерживаются HTML теги: |
Все, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title> |
Ещё примеры onclick
Нажмите <кнопку>, чтобы отобразить дату:
<button onclick="getElementById('demo').innerHTML = Date()">Который час?</button>
Попробуйте сами »
Щелкните элемент <h3>, чтобы изменить цвет текста:
<h3 id="demo" onclick="myFunction()">Нажми на меня чтобы изменить свой цвет.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Попробуйте сами »
Еще один пример того, как изменить цвет элемента:
<h3 onclick="myFunction(this, 'red')">Нажми на меня чтобы изменить свой цвет.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Попробуйте сами »
Нажмите, чтобы скопировать текст из одного поля ввода в другое:
<button onclick="myFunction()">Копировать текст</button>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Попробуйте сами »
Как назначить событие "onclick" для объекта Window:
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");
}
Попробуйте сами »
Поддержка onclick
onclick является функцией DOM Уровень 2 (2001).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |