به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث 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>

<button id="myBtn">Click Me</button>

// 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>

<button id="myBtn">Click Me</button>

// 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);

1	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>

<button id="myBtn">Click Me</button>

// 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>

// 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>

<button id="myBtn">Click Me</button>

// 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 در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.

سایر مقالات:

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

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

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

آموزش پیاده سازی فرگمنت ها (Fragment) در اندروید استودیو نوشته قبل

آموزش نصب و اجرای شبیه ساز جنی موشن نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.