کلیک کردن، دو بار کلیک کردن، قرارگیری ماوس روی یک المان (mouseOut)، حرکت از روی المان (mouseOut)  و ... از نمونه‌ رویدادهایی هستند که در جاوا اسکریپت اتفاق می‌افتند. در این جلسه نحوه استفاده از آن‌ها را خواهیم آموخت. همانطور که گفتیم، هر کاری که کاربر انجام می‌دهد، مانند کلیک کردن، دابل کلیک، قرارگیری ماوس روی یک المان (mouseOut)‌، حرکت از روی المان (mouseOut)‌، لود شدن کامل صفحه (یکی از پر‌کاربردترین رویدادها) و ... همه و همه یک رویداد جاوا اسکریپتی محسوب می‌شوند. در ادامه به چند تا از مهمترین و پرکاربردترین رویدادها اشاره می‌کنیم و توضیح می‌دهیم که هر کدام از این رویدادها چه زمانی اتفاق می‌افتند. ولی قبل از آن باید یک سوال مهم‌تر و بنیادی‌تر را پاسخ دهیم! این رویدادها به چه دردی می‌خورند و چطور باید از آن‌ها استفاده کرد! سوال خوبی است! رویدادها یا eventها کارشان این است تا به محض اتفاق افتادن به برنامه نویس اجازه را می‌دهد تا کد مورد نظرش را بنویسد و یک اتفاق هیجان انگیز رقم بزند. مثلا با رویداد کلیک می‌توانید بگویید به محض کلیک روی فلان المان، قرار است چه اتفاقی بیفتد.

نحوه اضافه کردن رویداد به تگ HTML

یک راه اضافه کردن یک ایونت به صفحه، دست بردن به تگ‌های اچ تی ام ال و اضافه کردن رویداد مربوطه به تگ اچ تی ام ال است. مثلا اگر یک تگ اچ‌تی‌ام‌ال با نام some-HTML-element داریم، می‌توانیم some-event برای آن در نظر بگیریم!‌ حالا این some-event می‌تواند کارش چک کردن کلیک باشد، می‌تواند آمدن و رفتن ماوس باشد یا هر رویداد دیگری!

<element event='some JavaScript'>

مثلا یک تگ پاراگراف داریم که می خواهیم با کلیک ماوس روی آن، یک پیغام دلخواه نمایش دهد.

<p onclick='alert("سلام کاربران زومیت") '> click On Me </p>

برای این کار به تگ p یک اتریبیوت با نام onclick اضافه می‌کنیم و در روبروی آن نام کاری که قرار است بعد از (کلیک) روی المنت انجام شود را می‌نویسیم. بدین ترتیب به محض کلیک ماوس روی این المان، رویدادی که ما بدان گفتیم اجرا می‌شود.

دقت کنید که وقتی می‌خواهیم کد جاوا اسکریپت را در داخل اتریبیوت اچ تی ام ال بنویسیم با یک چالش کوچک ولی مهم مواجه می‌شویم. آن هم تفاوت بین کوتیشن ' ' و دابل کوتیشن " "  است. وقتی محتویات اتریبیوت اچ تی ام ال را (مثلا در بالا محتویات اتریبیوت onclick) را درون سینگل کوتیشن گذاشته‌ایم ناچاریم تا محتویات استرینگی جاوا اسکریپت را درون دابل کوتیشن " " بگذاریم . مانند استرینگی که برای پیغام الرت نوشته‌ایم  ).

در جدول زیر لیست مهم‌ترین رویدادهای جاوا اسکریپتی را مشاهده می‌کنید:

صدا زدن فانکشن‌ها در رویدادها

فرض کنید یک فانکشن در فایل جاوا اسکریپت خود دارید که کارش این است که بعد از کلیک روی المان،‌ کار مربوط به خودش را انجام دهد. در روش قبلی دیدیم که ما کدهای جاوا اسکریپتمان را در داخل اتریبیوت اچ تی ام ال نوشته‌ایم. ولی به جای این کار می‌توانستیم یک فانکشن جاوا اسکریپتی را در رویداد صدا بزنیم. مثال زیر را ببینید:

فایل اچ‌تی‌ام‌ال

<button onclick="sayHello()">کلیک کنید</button>

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

var userName = "mohammad Hossein Malek"

function sayHello() {

   alert(userName)

}

وقتی که بتوانیم یک فانکشن را در داخل اتریبیوت رویدادهای اچ تی ام ال صدا بزنیم پس حتما می‌توانیم متغیرهایی را نیز بدان پاس دهیم! پس به شیوه زیر می‌توانیم اطلاعات بیشتری را از طریق فانکشن جاوا اسکریپتی از اج تی ام ال به جاوا اسکریپت پاس دهیم. برای مثال:

<button onclick="sayHello('ali','mina')">کلیک کنید</button>

ما در اینجا یک استرینگ با مقدار ali و یک استرینگ دیگر با مقدار mina به فانکشن sayHello پاس داده‌ایم. حالا در فانکشن جاوا اسکریپتی خود دو پارامتر دریافت کرده‌ایم :

function sayHello(name,family) {

   alert(name+family)

}

بدین ترتیب هر بار که قصد استفاده از این فانکشن جاوا اسکریپتی را داشته باشیم، تنها کافیست تا مقدار متغیرهایی که بدان پاس می‌دهیم را تغییر دهیم تا نام کاربری جدیدی داشته باشیم.

در مثال بعدی می‌خواهیم کار جذاب‌تری کنیم. مثلا می‌خواهیم یک تگ پاراگراف داشته باشیم که با کلیک روی آن محتویات این تگ در قالب پنجره alert نمایش داده شود. برای این کار به شیوه زیر عمل می‌کنیم:

<p onclick="alert(this.innerHTML)">محتویات من نمایش داده خواهد شد</p>

در این صورت محتویات تگ پاراگرافی که روی آن رفته‌ایم به صورت پنجره alert نمایش داده خواهد شد. ولی this در اینجا چیست و چه کار می‌کند؟ this در واقع آبجکتی است که در اینجا به المان اچ‌تی‌ام‌الی که رویداد در آن اتفاق افتاده است اشاره دارد. یکی از آیتم‌های این آبجکت innerHTML یا محتویات اچ تی ام ال این المان است.

در این حالت می‌توانیم کارهای جذاب و خلاقانه‌تری نیز انجام دهیم. مثلا رنگ المان را بعد از رفتن ماوس روی آن تغییر دهیم:

<p onclick="alert(this.style.color = 'green' )">محتویات من رنگی نمایش داده خواهد شد</p>

در اینجا ما از دستور style استفاده کرده‌ایم. برای استفاده از این دستور تنها کافیست تا نام المان اچ تی ام ال را بنویسیم و اتریبیوت رنگ در آن را تغییر دهیم.

پاس دادن this به عنوان پارامتر فانکشن

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

<p onclick="showContent(this)">محتویات من رنگی نمایش داده خواهد شد</p>

وقتی this را به فانکشن showContent پاس داده‌ایم، تمامی این آبجکت را در داخل کد جاوا اسکریپت خواهیم داشت. this در واقع اشاره به المان اچ تی ام الی دارد که درون آن المنت رویداد رخ داده است. بنابراین در کد جاوا اسکریپت خواهیم داشت:

function showContent(elementObject){

     alert(elementObject.innerHTML);

    elementObject.style.color = "red"

}

حالا روی هر تگی که اتریبیوت onclick="showContent(this)" را داشته باشیم، محتویات آن المان نمایش داده خواهد شد و رنگ آن نیز سبز خواهد شد. در همین مثال مي‌توانستیم هر بار یک رنگ دلخواه به المان پاس بدهیم. مثلا:

<p onclick="showContent(this, 'red' )">محتویات من رنگی نمایش داده خواهد شد</p>

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

function showContent(elementObject , color){

  alert(elementObject.innerHTML);

  elementObject.style.color = color;

}

تمرین: فرض کنید یک المان پاراگراف دارید و می‌خواهید با کلیک روی یک دکمه محتویات المان پاراگراف را در آن نشان دهید. 

در پاسخ این تمرین، تنها کافیست تا محتویات المان پاراگراف را بگیریم و در هنگام رویداد کلیک روی دکمه آن را نمایش دهیم!‌به همین سادگی!

<button onclick="showContent()">Click Me</button>

<p id="content">محتویات من را نشان بده</p>

function showContent() {

       var content = document.getElementById("content").innerHTML

      alert(content)

}

در این تمرین ما یک خطای عمدی داشته‌ایم!‌خطایی که در اجرای کد جاوا اسکریپت اخلالی ایجاد نمیکند ولی از نظر بهینه بودن کد کار صحیحی نیست. در واقع ما در داخل فانکشن showContent هر بار یک متغیر content ساخته‌ایم و هر بار المان پاراگراف با id با نام content را انتخاب کرده و محتویات اچ تی ام الش را در داخل این متغیر ذخیره کرده‌ایم. در حالی که در مواردی که تغییری در محتویات المان ایجاد نمی‌شود تنها کافی بود یکبار متغیر content را در بیرون فانکشن بگیریم و آن را بعد از کلیک نمایش دهیم. 

سخن پایانی:

در این جلسه با رویدادها آشنا شدیم و فهمیدیم که به کمک رویدادها می‌توانیم اتفاقاتی که در صفحه می‌افتد را رصد کرده و بر اساس آن تغییرات دلخواه را اعمال کنیم. این کار به شما در ایجاد یک تجربه کاربری واکنش پذیر کمک شایانی خواهد کرد.