The onclick Подія зазвичай виникає, коли користувач клацає елемент. Це дозволяє програмісту виконувати функцію JavaScript, коли натискається елемент. Цю подію можна використовувати для перевірки форми, попереджень і багато іншого.
За допомогою JavaScript цю подію можна динамічно додавати до будь-якого елемента. Він підтримує всі елементи HTML, крім , , , , , , , ,
, , і . Це означає, що ми не можемо застосувати onclick подія за вказаними тегами.
У HTML ми можемо використовувати onclick атрибут і призначити a функція JavaScript до нього. Ми також можемо використовувати JavaScript addEventListener() метод і пройти a натисніть для більшої гнучкості.
Синтаксис
Тепер ми бачимо синтаксис використання onclick подія в HTML і в javascript (без addEventListener() або за допомогою addEventListener() метод).
У HTML
У JavaScript
object.onclick = function() { myScript }; У JavaScript за допомогою методу addEventListener().
object.addEventListener('click', myScript);
Давайте подивимося, як використовувати onclick за допомогою деяких ілюстрацій. Тепер ми розглянемо приклади використання onclick подія в HTML і JavaScript.
Приклад 1. Використання атрибута onclick у HTML
У цьому прикладі ми використовуємо HTML onclick атрибут і призначення йому функції JavaScript. Коли користувач натискає цю кнопку, виконується відповідна функція, а на екрані з’являється діалогове вікно попередження.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Перевірте зараз Вихід
Після натискання вказаної кнопки виведення буде -
Приклад 2 – використання JavaScript
У цьому прикладі ми використовуємо JavaScript onclick подія. Тут ми використовуємо onclick подія з елементом абзацу.
Коли користувач натискає елемент абзацу, виконується відповідна функція, а текст абзацу змінюється. Після натискання на елемент, колір тла, розмір, межа та колір тексту також будуть змінені.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Перевірте зараз Вихід
Після натискання тексту Натисніть мене, вихід буде -
Приклад 3. Використання методу addEventListener().
У цьому прикладі ми використовуємо JavaScript addEventListener() спосіб прикріплення a натисніть подія до елемента абзацу. Коли користувач клацає елемент абзацу, текст абзацу змінюється.
При клацанні абзацу колір фону та розмір шрифту елементів також змінюються.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Перевірте зараз Вихід
При натисканні на текст Натисніть мене , вихід буде -
