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

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

سایر مقالات:

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

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