#آموزشی
بسم الله الرحمن الرحیم
با سلام خدمت همه شما، با جلسه هفتم آموزش جاوااسکریپت در خدمتتون هستم.
#javascript #جاوااسکریپت

در این جلسه قرار بر این شد که در مورد متد addEventListener و callback function ها توضیحاتی رو خدمتتون ارائه کنم.

addEventListener: با استفاده از متد addEventListener میتوان به یک المنت یک event handler اضافه کرد، بدون اینکه event handlerهای موجود overwrite شوند. پس شما به این وسیله می توانید به یک المنت تعداد زیادی event handler اضافه نمایید. (به تابعی که برای مدیریت کردن یک رویداد ایجاد می شود event handler می گویند)

برای نوشتن کد به صورت جاوااسکریپت بی آزار (unobtrusive javascript) از event listener ها استفاده می شود. زمانی که ما کدها را به شکل unobtrusive می نویسیم در واقع کدهای js را از HTML جدا میکنیم و دیگر نیازی به تعریف رویدادهایی مثل onclick درون یک تگ html نیست. مزیت دیگر این روش کدنویسی این است که شما مجبور بودید برای تعریف یک تابع برای مدیریت رویداد، آن تابع را به صورت مستقیم در فضای نام سراسری قرار بدهید و این امکان وجود داشت که نام تابع شما با تابع دیگری که در یک کتابخانه که به صفحه اضافه کردید یکی باشد و این مورد برای شما دردسر ساز می شد. اما با استفاده از addEventListener با این مشکل مواجه نیستیم.
فرمت کلی این دستور به شکل زیر است:

document.getElementById("myBtn").addEventListener("click", myEventHandler);

المنت مورد نظر رو انتخاب کرده و با دستور addEventListener تابعی که قرار است event handler ما باشد را به رویداد مورد نظر الصاق می کنیم. myEventHandler اسم تابع من برای مدیریت این رویداد است، می توان به جای استفاده از نام تایع، خود تابع را قرار داد:

document.getElementById("myBtn").addEventListener("click", function() {
// some code
});

این دستور صرفا برای رویدادهای مربوط به عناصر html نمی باشد، بلکه برای تمامی اشیاء DOM از قبیل window نیز مورد استفاده است.

window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = "sometext";
});

برای حذف یک eventListener به صورت زیر عمل می شود:

element.removeEventListener("myBtn ", myEventHandler);

مرورگرهای IE8 و قبل از آن و همینطور Opera6 و قبل از آن متدهای addEventListener و removeEventListener را پشتیبانی نمی کنند. رویداد جایگزین در این مرورگرها attachEvent و detachEvent می باشد. برای مدیریت این ناهماهنگی بین مرورگرها می توان به روش زیر عمل کرد:

var x = document.getElementById("myBtn");
if (x.addEventListener) { // For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}

خب، با توجه به مطالبی که گفته شد، من میتونم کدم مربوط به stopwatch رو به صورت زیر تغییر بدم:
کد HTML:

<body>
<div id="demo">0</div>
<input id="btnStart" type="button" value="start" />
<input id="btnStop" type="button" value="stop" />
</body>

کد JS:

document.addEventListener("DOMContentLoaded", function() {
'use strict';

// variables
var s = 0;
var myInterval;

start();

// eventListeners
document.querySelector("#btnStart").addEventListener("click", start);
document.querySelector("#btnStop").addEventListener("click", stop);

// functions
function start() {
myInterval = setInterval(function () { document.querySelector("#demo").innerText = ++s; }, 1000);
}
function stop() {
clearInterval(myInterval);
}
});

حالا با این روش خیال من از چند لحاظ راحته اول اینکه اسم متغیرهام با یک کتابخانه دیگر، فایل script دیگر و کدهای JS درون صفحه تداخل پیدا نمیکنه.:) همینطور اسم توابعم، و اینکه مجبور نیستم تابع مرتبط با یک رویداد رو در فضای نام سراسری بنویسم، همینطور اینکه برای تغییر اسم یه تابع لازم نیست برم سراغ کد HTML ووووو

همه چیز رو میبرم داخل یک تابع، البته از این توابع زیاد میتونم داشته باشم.
تنها چیزی که باید بگم اینه که، من این کد رو همونطور که میبینید طوری ننوشتم که همه مرورگرها رو پشتیبانی کنه. حتی برای متد load مربوط به document.

Callback Function:
در کد نویسی ممکن است که بخواهیم کدهایی را درون یک تابع قرار دهیم و این فقط یک خروجی نداشته باشد، یک حالتش این است که من می توانم از مجموعه خروجی های این تابع یک شئ ایجاد کنم و آن شئ را به عنوان خرجی تحویل دهم، روش دیگری که من می توانم به آن صورت