Event Listener در جاوا اسکریپت

به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Event Listener در جاوا اسکریپت بپردازیم.با ما همراه باشید.

Event Listeners چیست؟

Event Listener دقیقاً مانند event handler هستند، با این تفاوت که می‌توانید هر تعدادرویداد listeners را به یک رویداد یا المنت خاص اختصاص دهید.

برای درک نحوه عملکرد Event Listener ، اجازه دهید یک مثال ساده را بررسی نماییم.فرض کنید دو تابع ایجاد کرده اید و سعی می کنید هر دوی آنها را با کلیک روی دکمه با استفاده از کنترل کننده رویداد onclick اجرا کنید، همانطور که در مثال زیر نشان داده شده است:

<button id="myBtn">Click Me</button>
 
<script>
// Defining custom functions
function firstFunction() {
    alert("The first function executed successfully!");
}
 
function secondFunction() {
    alert("The second function executed successfully");
}
 
// Selecting button element
var btn = document.getElementById("myBtn");
 
// Assigning event handlers to the button
btn.onclick = firstFunction;
btn.onclick = secondFunction; // This one overwrite the first
</script>

اگر مثال بالا را اجرا کنید و روی المنت دکمه کلیک کنید، فقط ()secondFunction اجرا خواهد شد، زیرا با اختصاص دومین کنترل کننده رویداد، اولی اوررایت می شود.

نقص اصلی این مدل رویداد کلاسیک این است -که شما فقط می توانید یک کنترل کننده رویداد را به یک رویداد خاص در یک عنصر خاص اختصاص دهید،.برای مقابله با این مشکل، W3C مدل رویداد انعطاف‌پذیرتری به نام event listeners را معرفی نمود.

هر عنصر HTML می‌تواند چندین event listeners داشته باشد، بنابراین می‌توانید چندین تابع را به یک رویداد برای یک عنصر اختصاص دهید، همانطور که در مثال زیر نشان داده شده است:

<button id="myBtn">Click Me</button>
 
<script>
// Defining custom functions
function firstFunction() {
    alert("The first function executed successfully!");
}
 
function secondFunction() {
    alert("The second function executed successfully");
}
 
// Selecting button element
var btn = document.getElementById("myBtn");
 
// Assigning event listeners to the button
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>

حال اگر مثال بالا را اجرا کنید و روی دکمه کلیک کنید هر دو تابع اجرا می شوند.

علاوه بر نوع رویداد و پارامتر تابع لسینر، ()addEventListener یک پارامتر بولی دیگر useCapture را می پذیرد. این یک پارامتر اختیاری است که مشخص می کند از رویداد bubbling یا رویداد capturing استفاده شود. که سینتکس آن به این صورت می باشد:

target.addEventListener(event, function, useCapture);

اضافه کردن Event Listener برای انواع مختلف رویداد

مانندevent handler، می توانید event listenerهای مختلف را به انواع مختلف رویداد در یک عنصر اختصاص دهید. مثال زیر توابع مختلف event listener را به رویدادهای “click”, “mouseover”, و”mouseout” یک عنصر دکمه اختصاص می دهد.

<button id="myBtn">Click Me</button>
 
<script>
// Selecting button element
var btn = document.getElementById("myBtn");
 
// Defining custom functions
function sayHello() {
    alert("Hi, how are you doing?");
}
 
function setHoverColor() {
    btn.style.background = "yellow";
}
 
function setNormalColor() {
    btn.style.background = "";
}
 
// Assigning event listeners to the button
btn.addEventListener("click", sayHello);
btn.addEventListener("mouseover", setHoverColor);
btn.addEventListener("mouseout", setNormalColor);
</script>

Event Listener در جاوا اسکریپت | نحوه کار با رویداد Listener (شنونده)

اضافه کردن Event Listeners به Window Object

متد ()addEventListener به شما امکان می دهد event listener هر را به هر عنصر HTML DOM، شی سند، شی window یا هر شی دیگری که رویدادها را پشتیبانی می کند، به عنوان مثال، شی XMLHttpRequest اضافه نمایید.

به عنوان مثال:

<div id="result"></div>
 
<script>
// Defining event listener function
function displayWindowSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var size = "Width: " + w + ", " + "Height: " + h;
    document.getElementById("result").innerHTML = size;
}
 
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);
</script>

حذف Event Listeners

شما می توانید از متد ()removeEventListener برای حذف رویداد Listener که قبلاً با ()addEventListenerاضافه شده است استفاده نمایید.به عنوان مثال:

<button id="myBtn">Click Me</button>
 
<script> 
// Defining function
function greetWorld() {
    alert("Hello World!");
}
 
// Selecting button element
var btn = document.getElementById("myBtn");
 
// Attaching event listener
btn.addEventListener("click", greetWorld);
 
// Removing event listener
btn.removeEventListener("click", greetWorld);
</script>

توجه: متدهای ()removeEventListener و ()addEventListener در تمامی مرورگرهای اصلی پشتیبانی می شوند.ولی در IE 8 و نسخه های قبلی و Opera 6.0 و نسخه های قبلی پشتیبانی نمی شود.

خب دوستان گرامی به پایان بخش Event Listener در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.

سایر مقالات:

عملیات ریاضی در جاوا اسکریپت

تاریخ و زمان جاوا اسکریپت