معنی رویداد (event) در جاوا اسکریپت
به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد، بعد از بروز این اتفاق (رویداد)، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند، لذا همانطور که پیش تر در بحث توابع (functions) دیدیم، رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند و یک تابع بدون رویداد معمولا قابل اجرا نیست، برای آشنایی بیشتر به مثال زیر توجه کنید (کافی است کد را در یک صفحه html کپی و آن را تست کنید).
<script type="text/javascript">
function hello(){
alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
</script>
نحوه فراخوانی تابع بالا با رویداد onclick:
<input type="button" name="button" value="کلیک کنید" onclick="hello();" />
لیست رویداد ها در جاوا اسکریپت
رویداد ها در جاوا اسکریپت فراوانی و تنوع زیادی دارند، از این رو لیست تقریبا جامعی از آنها را در زیر تهیه کرده ایم، ذکر این نکته نیز ضروری است که رویدادهای جاوا اسکریپتی در تمام مرورگرها و نسخه های مختلف آنها به یک میزان و به یک شکل پشتیبانی نمی شوند، لذا در به کار بردن آنها باید به این مورد نیز دقت شود.
لیست رویداد ها در جاوا اسکریپت
addEventListener چیست؟
addEventListener که در برخی رویداد های بالا ذکر شده، به معنی شیوه استاندارد و تعریف شده W3C است که توسط آن با اجرای یک رویداد بر روی یک عنصر، مرورگر گوش به زنگ آن بوده و (بدون نسبت دادن مستقیم آن رویداد) توابع مربوط به آن فراخوانی می شوند، این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، ولی معادل آن attachEvent است (به جزء اینترنت اکسپلورر، سایر مرورگر ها از addEventListener پشتیبانی می کنند)، به طور مثال تابع زیر با کلیک بر روی بلاک با آی دی فرضی black اجرا می شود:
<script type="text/javascript">
function showtext(){
alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
//تمام مرورگرها به جزء اینترنت اکسپلورر
myblock.addEventListener("click", showtext, false);
}
else {
//اینترنت اکسپلورر
myblock.attachEvent("on"+"click", showtext);
}
</script>
در مثال و پیش نمایش آنلاین، در انتهای این صفحه، می توانید نمونه ای از آن را ملاحظه کنید.
مثال و پیش نمایش آنلاین
برای آشنایی بیشتر با مبحث رویدادها در جاوا اسکریپت، آموزش را با چند مثال و پیش نمایش آنها به صورت آنلاین به پایان می بریم.
می توانید جهت تست و بررسی بیشتر از کد زیر و پیش نمایش آن استفاده کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | رویدادها در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
#black{
width:100px;
height:100px;
background-color:#333;
display:block;
margin:4px;
}
</style>
<script type="text/javascript">
<!-- پنهان کردن کد از مرورگرهایی که جاوا اسکریپت را پشتیبانی نمی کنند
function hello(){
alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
function add(){
document.getElementById("text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی text چاپ می شود!";
}
function clean(){
document.getElementById("text").innerHTML = ;
}
-->
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br />
</noscript>
مثال برای رویداد onclick :
<br /><br />
<input type="button" value="کلیک کنید" onclick="hello();" />
<hr />
<br /><br />
مثال برای رویداد onmouseover و onmouseout :
<br /><br />
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" />
<input type="button" value="ماوس را از روی این دکمه خارج کنید" onmouseout="clean();" />
<div id="text"></div>
<hr />
<br /><br />
مثال برای حالت addEventListener :
<br /><br />
بر روی بلاک زیر کلیک کنید.
<div id="black"></div>
<script type="text/javascript">
<!--
function showtext(){
alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
//تمام مرورگرها به جزء اینترنت اکسپلورر
myblock.addEventListener("click", showtext, false);
}
else {
//اینترنت اکسپلورر
myblock.attachEvent("on"+"click", showtext);
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onfocus و onblur :
<br /><br />
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocus(this);" onblur="myBlur(this);" />
<script type="text/javascript">
<!--
function myFocus(element){
if (element.value == element.defaultValue){
element.value = ;
}
}
function myBlur(element){
if (element.value == ){
element.value = element.defaultValue;
}
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onkeydown و onkeyup :
<br /><br />
<input type="text" id="first" value="در این فیلد متنی تایپ کنید..." onkeydown="myKeydown(this);" onkeyup="myKeyup(this);" />
<script type="text/javascript">
<!--
function myKeydown(element){
if (element.value == element.defaultValue){
element.value = ;
}
}
function myKeyup(element){
if (element.value == ){
element.value = element.defaultValue;
}
}
-->
</script>
</body>
</html>