Пояснення події JavaScript Onclick

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до посилань ( aтег HTML ), ми можемо не допустити дії за замовчуванням:

Guides  function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

У наведеному вище прикладі ми запобігли поведінку aелемента за замовчуванням (посилання, що відкривається), використовуючи event.preventDefault()всередині нашої onclickфункції зворотного виклику.

MDN

Інші ресурси

jQuery .on () Вкладений файл обробника подій