این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش رویداد عمومی OnClick در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش رویداد عمومی OnClick در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
رویداد عمومی onclick در HTML
رویداد onclick زمانی رخ میدهد که بروی چیزی کلیک شود، معمولا از این رویداد موقعی استفاده میکنیم که بخوایم با کلیک بروی یک تگ یک عمل خاصی انجام شود.
Free-Learn
مثال از رویداد عمومی onclick در HTML
در ادامه میتوانید یک مثال از این رویداد را مشاهده نمایید.
مثال شماره ۱ : نمایش یک متن با کلیک بروی دکمه
|
1 2 3 4 5 |
<body> <button onclick="MyMessage();">روی من کلیک کن</button> </body> |
مثال شماره ۲ : مخفی کردن متن وقتی بروی دکمه کلیک شد
|
1 2 3 4 5 6 |
<button onclick="Hide();">روی من کلیک کن</button> <div id="myText"> <p>سایت آموزشی فری لرن</p> <img src="files/logo.png"> </div> |
مثال شماره ۳ : گرفتن آدرس کامل URL صفحه ( یعنی با کلیک بروی یک دکمه، آدرس URL صفحه جاری از نوار آدرس مرورگر گرفته و نمایش داده میشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <button onclick="GetURL();">کلیک کنید</button> <p id="Result"></p> <script> function GetURL(){ var MyURL , Result; Result = document.getElementById("Result"); MyURL = document.URL; Result.innerHTML = MyURL; Result.style.display = "block"; } </script> </body> |
مثال شماره ۴ : دکمه اشتراک گذاری در شبکه های اجتماعی ( واتس اپ ، توییتر ، تلگرام ، لینکدین ) ، یعنی اون صفحه ای که داخلش هستید آدرس URL اش میتونه در این شبکه ها به اشتراک گذاشته شه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> var My_URL = document.URL; function whatsapp(){ var url = "https://wa.me/?text="; window.open( url + My_URL , '_blank' ); } function twitter(){ var url = "https://twitter.com/share?url="; window.open( url + My_URL , '_blank' ); } function telegram(){ var url = "https://telegram.me/share/url?url="; window.open( url + My_URL , '_blank' ); } function linkedin(){ var url = "https://www.linkedin.com/shareArticle?url="; window.open( url + My_URL , '_blank' ); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از رویداد onclick در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این رویداد در عناصر HTML بصورت زیر می باشد.
|
1 |
<element onclick="Script"> |
Free-Learn
جدول مقادیر رویداد onclick
در جدول زیر میتوانید مقادیری را که میتوان در این رویداد استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| Script | دستورات جاوااسکریپت برای اجرا شدن |
Free-Learn
عناصری که توسط این رویداد پشتیبانی می شوند
رویداد onclick را میتوان در تمامی عناصر/تگ های معتبر HTML بکار برد.
ولی در تگ های زیر نمیتوان این رویداد را بکار برد :
| <base> | <bdo> | <br> | <head> |
| <html> | <iframe> | <meta> | <param> |
| <script> | <style> | <title> | |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
