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'; } Тествайте сега Изход
При щракване върху текста Щракни върху мен , изходът ще бъде -
