کلیک جاوا اسکریپت

در این مقاله با نکات کلیک جاوا اسکریپت آشنا می شوید.

نکات اصلی کلیک جاوا اسکریپت:

• JavaScript ویژگی رویداد onclick یک رویداد ماوس است که وقتی روی یک شی HTML که دارای ویژگی onclick است کلیک می کنید ، یک خط کد مشخص را اجرا می کند.
• این مورد برای همه عناصر HTML قابل اجرا است ، به استثنای تگ های زیر: <meta> و <title>.

Onclick چیست

بیایید مقدمه را با بیان اینکه ویژگی JavaScript onclick event به شما امکان می دهد اسکریپت ها را به عناصر HTML اختصاص دهید ، شروع کنیم. اگر در حال طراحی وب سایت هستید ، ممکن است بخواهید دکمه های خود (یا محتوای دیگری) را ارتقا دهید. توجه داشته باشید که ویژگی onclick توابع را تغییر نمی دهد: این یک لایه دیگر از قابلیت ها را به آنها اضافه می کند.

به عنوان مثال ، اگر می خواهید با کلیک یک دکمه یا روی عنصر دیگری رنگ متن تغییر کند ، این امر با ویژگی JavaScript onclick event قابل دستیابی است. به عبارت دیگر ، پس از تعامل کاربران با عناصر با ویژگی onclick دکمه JavaScript ، تابع اختصاص داده شده فراخوانی می شود.

علیرغم ساده بودن ، ویژگی رویداد onclick قادر است با ایجاد پویایی بیشتر وب سایت ها را بهبود بخشد. اطمینان از تجربه کاربری رضایت بخش وظیفه هر صاحب وب سایت است. بنابراین ، توابع و ویژگی های ساده ای را که ممکن است وب سایت ها را افزایش دهند بدون نیاز به تلاش زیاد نادیده بگیرید.

نحو مناسب کلیک جاوا اسکریپت

جاوا اسکریپت در ویژگی رویداد کلیک دارای قوانین نحوی ساده اما خاصی است . باید سعی کنید آنها را بخاطر بسپارید:

object.onclick = function () {my_script}؛

شما باید عنصر HTML را که می خواهید با برخی قابلیت های اضافی افزایش دهید ، مشخص کنید. همچنین ، شما باید عملکرد واقعی را که برای آن عنصر اعمال می شود ، اضافه کنید.

ما همچنین نحو addEventListener را نیز نشان می دهیم که می تواند با کلیک بر روی یک عنصر ، یک عملکرد را فراخوانی کند:

object.addEventListener (“کلیک کنید” ، my_script) ؛

توجه: روش () addEventListener در Internet Explorer 8 و نسخه های قبلی پشتیبانی نمی شود.

مثالهای کد

واضح است که عملکرد onclick جاوا اسکریپت می تواند به شما در دستیابی به موفقیت های زیادی کمک کند. در این بخش ، شما چند نمونه کد متداول را برای شروع تمرین به شما معرفی می کنیم. مثال اول نشان می دهد که چگونه می توان رنگ متن را پس از کلیک کاربران بر روی آن تغییر داد:

<p id="sample" onclick="sampleFunction()"></p>

اکنون ، در مثال زیر ، متن نیز با کلیک تغییر رنگ می دهد ، اما روش دیگری استفاده می شود:

<p onclick="sampleFunction(this, 'lime')"></p>

آخرین مثال ما نحوه استفاده از یک دکمه با عنصر کشویی JavaScript را نشان می دهد:

document.getElementById("sampleButton").onclick = () => {
  sampleFunction()
};   
// sampleFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content
function sampleFunction() {
  document.getElementById("sampleDropdown").classList.toggle("show");
}