مقالات طراحی سایت

eventها!

وب سایت MDNرویدادها را بصورت زیر تعریف کرده است:

event رویدادی را که در DOM اتفاق می افتد را نمایش میدهد.

eventها ، رودیدادهایی را که در یک برنامه رخ میدهند را اطلاع میدهد. بنابراین شما میتوانید به این رویدادها پاسخ بدهید.

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

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

1. event handler

2. event listener

شیوه اول - Event Handler

Event Handler در جاوااسکریپت چیزی شبیه به این است:

 
const button = document.querySelector(".btn")
button.onclick = function() {
 console.log("Hello!");
};
// OR
button.onclick = () => {
 console.log("Hello!");
};
 

در مثال بالا، از پراپرتی "onclick" event handler استفاده شده است. بنابراین هر زمان که کاربر بر روی دکمه کلیک کرد، در کنسول خود عبارت "Hello!" را مشاهده میکند.

رویداد "onclick" تنها یکی از event handlerهایی است که شما میتوانید استفاده کنید. برای اطالاعات بیشتر به سایت MDN مراجعه کنید.

شیوه دوم - Event Listener

شیوه دیگر استفاده از رویدادها در جاوااسکریپت، استفاده از event listener است.

با اضافه کردن event listener به یک آبجکت، میتوانید دامنه وسیعی از رویدادهایی که توسط کاربر یا مرورگر trigger شده اند را بگیرید.

Event Listener در جاوااسکریپت چیزی شبیه به این است:

 
const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
 console.log("Hello!");
})
// OR
button.addEventListener("click", event => {
 console.log("Hello!");
})
 

مثال بالا همان نتیجه event handler را دارد. اما این بار به جای استفاده از پراپرتی "onclick" ما event listener را نوشتیم که رویداد "click" را trigger میکند.

رویدادهای زیادی را میتوان با event listener گوش داد. برای اطلاعات بیشتر به وب سایت MDN مراجعه کنید.

تفاوت بین Event Handler و Event Listener

اگر شما برای یک دکمه دوبار event handler استفاده کنید، دومین event handler اولی را اورراید میکند و تنها دومین رویداد trigger خواهد شد.

بنابراین برای یک المان تنها میتوانید یک event handler برای هر event type داشت.

 
const button = document.querySelector(".btn")
button.onclick = () => {
 console.log("Hello!");
};
button.onclick = () => {
 console.log("How are you?");
};
// This wil log "How are you?" to the console.
 

در مثال بالا، event listener اولی اورراید می شود و زمانی که کاربر بر روی دکمه کلیک میکند تنها "How are you?" را در کنسول خود خواهد دید.

 
const button = document.querySelector(".btn")
button.addEventListener("click", event => {
 console.log("Hello!");
})
button.addEventListener("click", event => {
 console.log("How are you?");
})
// This wil log 
// "Hello!"
// "How are you?"
// to the console
 

در مثال بالا، ما چندین event listener به دکمه اضافه کردیم

با این روش، زمانی که کاربر روی دکمه کلیک میکند، هر دو فانکش را trigger میکند و در کنسول خود "Hello! How are you?" را خواهد دید.

کدام یک را استفاده کنیم؟

استفاده از هرکدام از این دو روش به شما و مورد استفاده تان بستگی دارد.

لازم است بیش از یک رویداد را به المان خود متصل کنید؟ در آینده ممکن است این اتفاق رخ دهد؟

با این حال پیشنهاد میشود از "addEventListener" ااستفاده کنید، اما این کاملا به خود شما بستگی دارد.

نتیجه گیری

در این مقاله ما آموختیم که:

1. در جاوااسکریپت دو شیوه برای هندل کردن رویدادها وجود دارد: event handler و add event listener.

2. برای یک المان، تنها میتوان یک event handler برای هر event type نوشت، اما میتوان چندین event listener داشت.

3. بطور کلی، توصیه میشود از event listenerها استفاده کنید.

به نقل از: medium