رویداد onclick

مثال (رویداد onclick)

اجرا کردن یک تابع جاوااسکریپت، هنگامی که روی یک دکمه کلیک می شود:

<button onclick="myFunction()">Click me</button>

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

رویداد onclick هنگامی رخ می دهد که کاربر روی یک عنصر کلیک می کند.

پشتیبانی مرورگرها

Event
onclick	بله	بله	بله	بله	بله

نحوه استفاده

In HTML:

<element onclick="myScript">امتحان کنید

In JavaScript:

object.onclick=function(){myScript};امتحان کنید

در جاوااسکریپت، استفاده از متد addEventListener():

object.addEventListener("click", myScript);امتحان کنید

نکته: متد addEventListener()، در internet Explorer 8 و ورژن های قدیمی تر آن پشتیبانی نمی شود.

جزئیات تکنیکی

Bubbles:	بله
Cancelable:	بله
Event type:	MouseEvent
Supported HTML tags:	تمام عناصر html به جز: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
DOM Version:	Level 2 Events

مثال - خودتان امتحان کنید

مثال (رویداد onclick)

کلیک کردن روی یک <button> برای نمایش امروز و تاریخ و زمان :

خودتان امتحان کنید »

مثال (رویداد onclick)

کلیک کردن روی یک عنصر <p> برای تغییر دادن رنگ متن به قرمز:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

خودتان امتحان کنید »

مثال (رویداد onclick)

یک مثال دیگر اینکه چطور با کلیک بر روی یک عنصر <p> رنگ آن را تغییر دهیم:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>

خودتان امتحان کنید »

مثال (رویداد onclick)

کلیک کردن روی یک دکمه برای کپی کردن مقداری متن از یک فیلد input به یک فیلد دیگر:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

خودتان امتحان کنید »

مثال (رویداد onclick)

اختصاص دادن رویداد onclick، به شیء window:

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

خودتان امتحان کنید »