در این بخش از سری آموزش جاوا اسکریپت قصد داریم در مورد Event Listener در جاوا اسکریپت صحبت کنیم.
درک Event Listener در جاوا اسکریپت
Event Listener همانند event handler ها (هنلدر رویداد) هستند با این تفاوت که شما می توانید که می توانید تعداد بیشتری Event Listener را به یک رویداد یا المان خاص اختصاص بدید.
برای درک اینکه چگونه Event Listener ها کار می کنند, به مثال زیر توجه کنید.
فرض کنیم قصد دارید دو تابع ایجاد کنید و می خواهید هر دو آنها را با کلیک روی هندلر رویداد onclick
اجرا کنید همانطور که در مثال زیر نشان داده شده :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 کلیک کنید, فقط تابع secondFunction()
اجرا خواهد شد چراکه هنلدر رویداد دومی روی اولی بازنویسی می شود.
این یکی از کمبودهای اصلی مدل رویداد کلاسیک است که شما تنها می توانید یک هندلر رویداد را به رویداد خاص روی المان اختصاص بدید.
برای حل این مشکل, W3C یک مدل رویداد منعطف تر به نام Event listeners را معرفی کرده است.
هر المان HTML می تواند چندین event listeners داشته باشد, بنابراین می توانید چندین تا به را به همان رویداد و همان المان اختصاص بدید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
حالا, اگر مثال بالا را اجرا کنید و دکمه را کلیک کنید هر دو تابع اجرا خواهند شد.
افزودن Event Listener ها به نوع رویدادهای متفاوت
همانند هندلر رویداد, می توانید Event Listener های متفاوت را به نوع رویدادهای مخنلف روی المان یکسان اختصاص بدید.
1 |
target.addEventListener(event, function, useCapture); |
مثال زیر توابع Event Listener مختبف را به رویدادهای click
, mouseover
, mouseout
از یک المان button
را نشان می دهد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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 به شی window
متد addEventListener()
به شما اجازه می دهد که event listener ها را به هر المان HTML DOM , شی document
,window
یا آبجکتی دیگری که رویدادها را پشتیبانی می کند مثل XMLHttpRequest
اضافه کنید.
یک مثاب از افزودن یک event listener به رویداد resize
شی window
را می بینید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 listener
می توانید از removeEventListener()
برای حذف یک event listener ای که قبلا توسط addEventListener()
اضافه شده استفاده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش Event Listener در جاوا اسکریپت نهایت استفاده را برده باشد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
ممنون
عالی بود
سلام.
خوشحالیم که مفید واقع شده.
موفق باشید.