2.9 KiB
title | localeTitle |
---|---|
Onclick Event | Событие Onclick |
Событие Onclick
Событие onclick
в JavaScript позволяет программисту выполнять функцию при нажатии элемента.
пример
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>
В простом примере выше, когда пользователь нажимает на кнопку, они будут видеть предупреждение в своем браузере, на котором Button was clicked!
,
Добавление onclick
динамически
Событие onclick
также может быть программно добавлено к любому элементу, используя следующий код в следующем примере:
<p id="foo">click on this element.</p>
<script>
var p = document.getElementById("foo"); // Find the paragraph element in the page
p.onclick = showAlert; // Add onclick function to element
function showAlert(event) {
alert("onclick Event triggered!");
}
</script>
Заметка
Важно отметить, что с помощью onclick мы можем добавить только одну функцию прослушивателя. Если вы хотите добавить больше, просто используйте addEventListener (), что является предпочтительным способом добавления слушателей событий.
В приведенном выше примере, когда пользователь нажимает на элемент paragraph
в html
, он увидит предупреждение, отображающее onclick Event triggered
.
Предотвращение действия по умолчанию
Однако , если мы придаем onclick
для ссылки (HTML это тег) мы могли бы предотвратить действие по умолчанию произойдет: a
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>
В приведенном выше примере мы предотвратить поведение по умолчанию a
(открытие ссылки) элемента с помощью event.preventDefault()
внутри нашей onclick
функции обратного вызова.