Обяснено събитие за Onclick на JavaScript

В 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 () Прикачен файл с обработчик на събития