Тхе онцлицк догађај се обично дешава када корисник кликне на елемент. Омогућава програмеру да изврши ЈаваСцрипт функцију када се кликне на елемент. Овај догађај се може користити за валидацију обрасца, поруке упозорења и још много тога.
имессаге игре са андроидом
Користећи ЈаваСцрипт, овај догађај се може динамички додати било ком елементу. Подржава све ХТМЛ елементе осим , , , , , , , ,
, , и . То значи да не можемо применити онцлицк догађај на датим ознакама.
У ХТМЛ-у можемо користити онцлицк приписати и доделити а ЈаваСцрипт функција на то. Такође можемо користити ЈаваСцрипт аддЕвентЛистенер() метод и положити а кликните догађај за већу флексибилност.
Синтакса
Сада видимо синтаксу коришћења онцлицк догађај у ХТМЛ-у и у јавасцрипт (без аддЕвентЛистенер() методом или коришћењем аддЕвентЛистенер() метод).
У ХТМЛ-у
У ЈаваСцрипт-у
object.onclick = function() { myScript }; У ЈаваСцрипт-у помоћу методе аддЕвентЛистенер().
object.addEventListener('click', myScript);
Хајде да видимо како да користимо онцлицк догађај користећи неке илустрације. Сада ћемо видети примере коришћења онцлицк догађај у ХТМЛ-у и ЈаваСцрипт-у.
Пример 1 – Коришћење атрибута онцлицк у ХТМЛ-у
У овом примеру користимо ХТМЛ онцлицк атрибута и додељивање функције ЈаваСцрипт-а. Када корисник кликне на дато дугме, одговарајућа функција ће се извршити, а на екрану ће се приказати оквир за дијалог са упозорењем.
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 - Коришћење ЈаваСцрипт-а
У овом примеру користимо ЈаваСцрипт онцлицк догађај. Овде користимо онцлицк догађај са елементом пасуса.
Када корисник кликне на елемент пасуса, одговарајућа функција ће се извршити, а текст пасуса се мења. Кликом на елемента, боја позадине, величина, ивица и боја текста такође ће се променити.
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 - Коришћење методе аддЕвентЛистенер().
У овом примеру користимо ЈаваСцрипт аддЕвентЛистенер() начин причвршћивања а кликните догађај елементу пасуса. Када корисник кликне на елемент пасуса, текст пасуса се мења.
Када кликнете на пасус, промениће се и боја позадине и величина фонта елемената.
<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'; } Тестирајте одмах Излаз
Кликом на текст Кликни ме , излаз ће бити -
