آگهی
article

رویداد ها (Events) در جاوا اسکریپت (JavaScript)

javascript-event

یکی از قابلیت های بسیار مفید و کاربردی استفاده از جاوا اسکریپت (JavaScript) در طراحی صفحات و برنامه های تحت وب، واکنش های تعاملی آن متناسب با رفتار کاربر است، به فرض هنگامی که روی یک دکمه در صفحه ای کلیک می شود، می توان همزمان یا پس از آن، تابعی مبتنی بر جاوا اسکریپت را در سمت کاربر اجرا کرد و پیش از ارسال درخواست به سرور، پردازش های اولیه را بر روی آن انجام داد، این قدرت جاوا اسکریپت بیشتر متکی بر عناصری به نام رویداد (event) است که با وقوع آنها، عملیات تعریف شده خاصی در مرورگر اجرا می شود، در ادامه آموزش در این باره بیشتر خواهیم گفت.

معنی رویداد (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>
<!-- https://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>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
commentنظرات (۳۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: nili ball
زمان: ۲۳:۲۳:۵۲ - تاریخ: ۱۳۹۷/۰۱/۲۴
سلام وقت بخیر .. واقعا تشکر میکنم از مطالبتون خیلی عالی بود . ممکنه راهنماییم کنید من یه عکس دارم می خوام روش کلیک شد بره به یه صفحه دیگه که لینکشو دارم مثلا روی عکس لوگو گوگل کلیک شد بره صفحه مربوط به گوگلو یاز کنه یعنی روش کلیک شد وارد https://www.google.com بشه ممکه راهنماییم کنید؟
پاسخ: 
برای این منظور باید به آدرس صفحه مد نظر با تگ a در HTML لینک ایجاد کنید به فرض:
<a href="https://google.com" title="Google" target="_self">Google</a>
برای نمایش لینک در صفحه جدید به جای self مقدار blank را قرار دهید.
نویسنده: محمود
زمان: ۰۹:۰۰:۲۵ - تاریخ: ۱۳۹۷/۰۵/۲۱
سلام ، با آرزوی سلامتی برا شما و سایت خوبتان.
میخواهم تابعی طراحی کنم که وقتی روی یکی از خانه های جدول کلیک شد تابع فراخوانی شود. البته در خانه های جدول رویداد onclick را ننویسم . مثل خواسته دوستمان مصطفی که خاسته بود تابعی طراحی کنید که اگه کاربر هر کجای صفحه کلیک کرد تابع فراخوانی بشه،
به مصطفی اینچنین پاسخ داده بودید .
<script type="text/javascript">
window.onclick = function(){
alert('ok!');
}
</script>
حال اگر به جای window من کد زیر را قرار می دهم جواب نمی دهد.
document.getElementById("ftrow").onclick = function(){
alert('ok!');
}
لطفن راهنمایی کنید.
پاسخ: 
احتمالا باید تابع را بعد از کدهای جدول در صفحه درج کنید (نه قبل از آن)، علت این است که بر اساس HTML DOM عناصر صفحه از بالا به پائین بارگذاری می شوند و زمانی که به یک عنصر ارجاع می دهید باید از قبل بارگذاری شده و در دسترس باشد، در غیر اینصورت خطای Element Undefined در مفسر جاوا اسکریپت رخ می دهد.
نویسنده: admin
زمان: ۱۹:۰۲:۱۶ - تاریخ: ۱۳۹۷/۰۹/۳۰
سلام خدمت مدیر گروه محترم
برای تغییر رنگ خودکار تصویر پس زمینه در زمانهای مختلف مثلا شب تم شب و روز تم روز ظاهر شود از چه دستوری باید استفاده کنیم
پاسخ: 
در نمونه کد زیر تغییر رنگ پس زمینه با توجه به زمان شب یا روز بودن برای بلاک با آی دی header انجام شده است که از همین الگو می توانید برای موارد مشابه استفاده کنید:
<style>
#header {
height: 200px;
width: 100%;
border: 1px solid #B5B5B5;
}
.day {
background: #35AAFF;
}
.night {
background: #F7272A;
}
</style>
<div id="header"></div>
<script>
function smartTemplate(){
var daynight = document.querySelector('#header');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();

if(hours < 6 || hours >= 18) {
//console.log('night');
daynight.classList.remove('day');
daynight.classList.add('night');
}

if(hours >= 6 && hours < 18) {
//console.log('day');
daynight.classList.remove('night');
daynight.classList.add('day');
}
}

//call function
smartTemplate();
</script>
نویسنده: ansari
زمان: ۰۹:۳۰:۳۷ - تاریخ: ۱۳۹۸/۰۷/۱۵
سلام وقتتون بخیر من می خوام وقتی که از تابع alert استفاده می کنم title باکس رو عوض کنم یعنی this page says نیاد مثلا مثل شما که نوشتید webgoo.ir says بیاد باید چیکار کنم خیلی گشتم چیزی پیدا نکردم
ممنون میشم کمکم کنید
پاسخ: 
این متن به صورت خودکار توسط مرورگر (گوگل کروم) اضافه می شود و متاسفانه امکان تغییر آن وجود ندارد، در صورتی که در سایت آنلاین پنجره را نمایش دهید آدرس سایت در عبارت جایگزین می شود، اگر نیاز مبرم به نمایش متن سفارشی دارید باید پنجره اختصاصی مشابه طراحی کنید که نیازمند کدنویسی HTML + CSS + JavaScript است.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




9 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی