پیشنهادات دوره‌ای:
رویداد onclick
تعریف و استفاده
مثال
رویداد onclick در زمانی که کاربر روی عنصر کلیک می‌کند رخ می‌دهد.
وقتی روی دکمه کلیک می‌کنید، جاوااسکریپت اجرا می‌شود:
<button onclick="myFunction()">کلیک کنید</button>
در پایین صفحه مثال‌های بیشتری از TIY وجود دارد.
نحوه نوشتن
در HTML:< elementmyScriptonclick="
">
در جاوااسکریپت، از روش addEventListener() استفاده کنید:در جاوااسکریپت:myScript.onclick = function(){
};
در جاوااسکریپت، از روش addEventListener() استفاده کنید:.addEventListener("click", myScript);
نکته:اینترنت اکسپلورر 8 یا نسخه‌های قدیمی‌تر آن از addEventListener() پشتیبانی نمی‌کنند مетод addEventListener().
جزئیات فنی
| تورم: | پشتیبانی |
|---|---|
| لغو کردن: | پشتیبانی |
| نوع رویداد: | MouseEvent |
| برچسب‌های HTML پشتیبانی شده: | تمام عناصر HTML، به استثنای：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> و <title> |
| نسخه DOM: | رویدادهای سطح 2 |
پشتیبانی مرورگر
| رویداد | کروم | IE | فایرفاکس | سافاری | آپرا |
|---|---|---|---|---|---|
| onclick | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
مثال‌های بیشتر
مثال
برای نمایش تاریخ و زمان فعلی، روی <button> کلیک کنید:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
مثال
با کلیک بر روی عنصر <p>، رنگ متن آن به قرمز تغییر می‌یابد:
<p id="demo" onclick="myFunction()">کلیک کنید تا رنگ متن من را تغییر دهید.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
مثال
مثال دیگری در مورد اینکه چگونه با کلیک رنگ یک عنصر <p> را تغییر دهیم:
<p onclick="myFunction(this, 'red')">کلیک کنید تا رنگ متن من را تغییر دهید.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
مثال
با کلیک بر روی دکمه، مقدار یک متن از فیلد ورودی به فیلد ورودی دیگر کپی می‌شود:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
مثال
رویداد "onclick" را به شیء window تخصیص دهید:
window.onclick = myFunction;
// اگر کاربر در پنجره کلیک کند، رنگ پس‌زمینه <body> به زرد تغییر می‌کند
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
مثال
دکمه فهرست پایین را با استفاده از onclick ایجاد کنید:
// دکمه را دریافت می‌کند، وقتی کاربر کلیک می‌کند، myFunction اجرا می‌شود
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction در بین اضافه کردن و حذف کردن class "show" تغییر می‌کند، برای مخفی کردن و نمایش محتوای فهرست استفاده می‌شود */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
صفحات مرتبط
آموزش JavaScript:رویدادهای JavaScript
دستورالعمل HTML DOM:رویداد ondblclick
دستورالعمل HTML DOM:رویداد onmousedown
دستورالعمل HTML DOM:رویداد onmouseup
