به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Event Listener در جاوا اسکریپت بپردازیم.با ما همراه باشید.
Event Listeners چیست؟
Event Listener دقیقاً مانند event handler هستند، با این تفاوت که میتوانید هر تعدادرویداد 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 handlers to the button btn.onclick = firstFunction; btn.onclick = secondFunction; // This one overwrite the first </script>
secondFunction
اجرا خواهد شد، زیرا با اختصاص دومین کنترل کننده رویداد، اولی اوررایت می شود.هر عنصر 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 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 در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.
سایر مقالات:
دیدگاهتان را بنویسید