رویدادها در جاوا اسکریپت شنونده‌هایی هستند که در صورت رخ دادن رویداد خاصی در صفحه فعالیت مشخصی را انجام می‌دهند.
یکی از معروفترین Eventها onClick است. وظیفه این متد این است که اگر روی یک آیتم کلیک شد عملیات مشخص شده را باید انجام دهد:
<html>
<head></head>
<body>
<div id="main">Text Of Main Div</div>
<script>
document.getElementById('main').onclick = function(){
alert("item clicked");
};
</script>
</body>
</html>سورس بالا را ذخیره و اجرا نمایید و سپس روی نوشته Text Of Main Div کلیک کنید که مشاهده خواهید کرد یک پیام PopUp با متن item clicked نمایان خواهد شد.
البته راه کار دیگری برای استفاده از این رویداد وجود دارد:
<html>
<head></head>
<body>
<div id="main" onclick="alert('item clicked')">Text Of Main Div</div>
</body>
</html>همانطور که می‌بینید به تگ div یک خصیصه بنام onclick دادیم و درون آن دستور alert را جایگذاری نمودیم.
در پایین یک راه سوم نیز برای این کار به شما معرفی می‌کنیم:
<html>
<head></head>
<body>
<div id="main" onclick="func_alert()">Text Of Main Div</div>
<script>
function func_alert(){
alert("item clicked");
}
</script>
</body>
</html>درون خصیصه onclick نام تابع func_alert() را قرار می‌دهیم.
تابع func_alert را درون تگ script قرار می‌دهیم.
مثال زیر را ببینید:
<html>
<head></head>
<body>
<div id="main" onclick="func(this)">Text Of Main Div</div>
<script>
function func(obj){
console.log(obj.innerText);
}
</script>
</body>
</html>تابع func درون خصیصه onclick تگ div یک ورودی دارد و آن this است. this تگ فعلی را به تابع func ارسال می‌کند.
تابع func موجود در تگ script ورودی را با نام obj دریافت کرده و در سطر بعد با innerText متن درون تگ را در بخش console چاپ می‌کند.
استفاده از addEventListener
سورس زیر را ببینید:
<html>
<head></head>
<body>
<div id="main">Text Of Main Div</div>
<script>
var main = document.getElementById("main");
main.addEventListener('click', function(){
alert("item Clicked");
});
</script>
</body>
</html>addEventListener دو ورودی دارد، اول نوع رویداد، و دوم تابع مورد نظر.
رویداد onmousemove
از این رویداد برای بررسی وضعیت ماوس استفاده می‌شود. کد زیر را ببینید:
<html>
<head></head>
<body>
<div id="main">Text Of Main Div</div>
<script>
var body= document.getElementsByTagName('body')[0];
body.onmousemove= function(e){
console.log("x: " +e.clientX + ", y: " + e.clientY);
}
</script>
</body>
</html>نام این رویدار onmousemove است. درون function یک ورودی وجود دارد که می‌تواند وضعیت رویداد را معین کند.
در سطر بعدی تابع، مکان محور x ماوس را با e.clientX و مکان محور y ماوس را با e.clientY دریافت و چاپ می‌کنیم.
دیگر رویدادهای JavaScript
رویدادهای JavaScript زیادی هستند که شاید ذکر همه آن‌ها امکان پذیر نباشد، در پایین چند رویداد مهم JavaScript را با هم ببرسی می‌کنیم:
onload: به محض لود شدن کامل صفحه صدا زده می‌شود.
onchange: به هنگام ایجاد تغییر در یک آیتم صدا زده می‌شود.
onmouseover: به محض آمدن ماوس روی المان صدا زده می‌شود.
onmouseout: به محض ترک ماوس از روی المان صدا زده می‌شود.
قسمت‌های بعدی را از دست ندهید.