пример
Выполнение JavaScript при нажатии кнопки:
<button onclick="myFunction()">Click me</button>
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
OnClick событие происходит, когда пользователь нажимает на элемент.
Поддержка браузеров
| Мероприятие | |||||
|---|---|---|---|---|---|
| onclick | да | да | да | да | да |
Синтаксис
В HTML:
В JavaScript:
object .onclick=function(){ Попробуй сам " В JavaScript, используя addEventListener() метод:
object .addEventListener("click", myScript );
Попробуй сам " Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий.
Технические подробности
| Пузыри: | да |
|---|---|
| аннулированию: | да |
| Тип события: | MouseEvent |
| Поддерживаемые HTML-теги: | Все HTML - элементы, КРОМЕ: <основание>, <БДО> <br>, <HEAD>, <HTML>, <IFRAME>, <META>, <PARAM>, <скрипт>, <стиль> и <title> |
| DOM Версия: | Уровень 2 События |
Еще примеры
пример
Нажмите на <button> элемент для отображения текущего дня, даты и времени:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Попробуй сам " пример
Нажмите на <p> элемент , чтобы изменить цвет текста на красный:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Попробуй сам " пример
Другой пример того , как изменить цвет <p> элемент, нажав на нее:
<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text
color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
Попробуй сам " пример
Нажмите на кнопку, чтобы скопировать текст из поля ввода в другое поле ввода:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Попробуй сам " пример
Присвоить "onclick" событие для объекта окна:
window.onclick = myFunction;
// If the user clicks in the window, set
the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Попробуй сам " пример
Использование OnClick для создания кнопки раскрывающегося списка:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Попробуй сам " Похожие страницы
HTML DOM ссылка: ondblclick событие
HTML DOM ссылка: OnMouseDown событие
HTML DOM ссылка: OnMouseUp событие
<Объект Event