В onclick
случай на JavaScript ви позволява като програмист изпълни дадена функция, когато даден елемент се натисне.
Бутон Onclick Пример
Click me function myFunction() { alert('Button was clicked!'); }
В простия пример по-горе, когато потребителят щракне върху бутона, той ще види предупреждение в браузъра си, показващо се Button was clicked!
.
Добавяне на onclick динамично
В onclick
случай може да се програмно добавя към всеки елемент с помощта на следния код в следния пример:
click on this element.
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!"); }
Забележка
Важно е да се отбележи, че с помощта на onclick можем да добавим само една функция на слушател. Ако искате да добавите още, просто използвайте addEventListener (), който е предпочитаният начин за добавяне на слушател на събития.
В горния пример, когато потребителят щракне върху paragraph
елемента в html
, той ще види предупреждение onclick Event triggered
.
Предотвратяване на действие по подразбиране
Ако обаче прикачим onclick
към връзки (HTML a
таг), може да пожелаем да се предотврати действието по подразбиране:
Guides function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); }
В горния пример предотвратихме поведението по подразбиране на a
елемента (отваряща връзка), използвайки event.preventDefault()
нашата onclick
функция за обратно извикване.
MDN
Други ресурси
jQuery .on () Прикачен файл с обработчик на събития