رویدادها در JavaScript
مدل DOM به JavaScript اجازه می دهد تا به رویدادهای یک صفحه HTML، واکنش نشان دهد.
مثال (رویدادها در JavaScript)
واکنش به رویدادها
یک کد JavaScript می تواند زمانی که یک رویداد اتفاق می افتد، اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک کند.
برای اجرای شدن کد JavaScript به ازای یک رویداد، باید کد مورد نظر را در خصوصیت مربوط به همان رویداد نوشت:
مثالی از رویدادها:
-
با كلیك موس
-
زمانی كه یك صفحه یا یك عكس بارگذاری می شود
-
موس بر روی یك نقطه خاص بر روی صفحه برود
-
انتخاب كردن یك فیلد ورودی در فرم HTML
-
ارسال یك فرم HTML
-
فشردن یک کلید کیبورد
توجه: معمولاً رویدادها در تركیب با توابع استفاده می شوند و قبل از آنكه رویداد اتفاق بیافتد، تابع اجرا نخواهد شد.
در مثال زیر، زمانی که کاربر روی متن کلیک کند، محتوای عنصر <h1> تغییر می کند:
مثال (رویدادها در JavaScript)
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
در مثال زیر، زمانی که کاربر روی متن کلیک کند، تابع changetext فراخوانی می شود:
مثال (رویدادها در JavaScript)
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
اختصاص رویدادها به عناصر
برای اختصاص دادن رویدادها به عناصر HTML، باید از نام خصوصیت های مربوط به همان رویداد استفاده نمود.
مثال (رویدادها در JavaScript)
اختصاص خصوصیت onclick به عنصر button
در مثال بالا، زمانی که کاربر روی دکمه کلیک نماید، تابع displayDate فراخوانی می شود.
اختصاص رویدادها با استفاده از مدل DOM
مدل DOM به شما اجازه می دهد تا رویدادها را به صورت داینامیک به عناصر HTML اختصاص دهید:
مثال (رویدادها در JavaScript)
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
در مثال بالا، به ازای رویداد onclick عنصر با شناسه "myBtn"، تابع displayDate فراخوانی می شود. (زمانی که روی عنصر کلیک شود تابع فراخوانی می شود)
رویدادهای onload و onunload
onload رویدادی است که با ورود کاربر به صفحه راه اندازی می شود و onunload زمانی که از آن خارج می شود.
رویداد onload معمولا برای چك كردن نوع و نسخه مرورگر بیننده استفاده می شود و بر اساس اطلاعات بدست آمده یک نسخه مناسب از صفحه وب را بارگذاری می کند.
همچنین هر دو رویداد معمولا برای تنظیم كوكی ها، موقعی كه كاربر وارد صفحه می شود و یا آنرا ترك می كند، استفاده می شود. برای مثال شما می توانید یك پنجره popup برای درخواست نام كاربر به محض اولین ورود به صفحه داشته باشید. اسم مورد نظر در داخل كوكی ذخیره می شود. دفعه ی بعد كه بیننده وارد صفحه ی شما می شود می توانید یك پنجره popup جدید مانند "آقای احمدی خوش آمدید" را داشته باشید.
رویدادهای onFocus ، onBlur و onChange
این سه رویداد اغلب برای اعتبارسنجی فرم ها استفاده می شوند.
onBlur: هنگامیکه تمرکز از روی یکی از اجزای فرم خارج شود.
onfocus: هنگامیکه توسط موس و یا دکمه Tab کیبورد بر روی یکی از اجزای فرم تمرکز شود.
onchange: هنگامی که در اجزای فرم تغییر ایجاد شود، مانند زمانی که متن داخل یک کادر متنی تغییر یابد.
مثال زیر چگونگی استفاده از رویداد onchange را نشان می دهد. زمانی كه كاربر محتوای کادر متنی را تغییر دهد، تابع ()upperCase فراخوانی می شود:
مثال (رویدادها در JavaScript)
رویداد onmouseover و onmouseout
رویداد onmouseover و onmouseout می تواند زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد و یا از روی آن خارج می شود، یک تابع را راه اندازی کند.
در مثال ساده زیر، زمانی که موس روی کادر قرمز رنگ قرار می گیرد (onmouseover)، متن آن تغییر می کند و زمانی که موس از روی آن کنار می رود (onmouseout)، به حالت اول برمی گردد:
رویداد onmousedown و onmouseup و onclick
onmousedown: زمانی که دکمه موس، فشار داده می شود.
onmouseup: زمانی که دکمه موس، رها می شود.
onclick: زمانی که عملیات کلیک کردن موس، کامل می شود.
مثال (رویدادها در JavaScript)
یک مثال ساده از رویدادهای onmousedown و onmouseup
رویداد onSubmit
رویداد onsubmit معمولاً برای اعتبارسنجی همه ی فیلدها یک فرم، قبل از ارسال به سرور استفاده می شود.
در مثال زیر چگونگی استفاده از این رویداد نشان داده شده است. تابع ()checkForm زمانی كه كاربر دكمه ای از فرم را فشار می دهد فراخوانی می شود. اگر مقادیر فیلدها پذیرفته نشود، ارسال صفحه به سرور متوقف می شود، تابع ()checkForm مقدار True و یا False را بر می گرداند. اگر مقدار True را برگرداند صفحه ارسال می شود، در غیر این صورت ارسال صفحه متوقف خواهد شد:
مثال های بیشر
onmousedown and onmouseup
زمانی که کاربر دکمه موس را پایین نگه می دارد، خصوصیت src عنصر <img> تغییر می کند.
onload
نمایش یک پیغام، زمانی که بارگذاری صفحه تمام شود.
onfocus
زمانی که موس روی عنصر <input> قرار گرفت (focus)، رنگ پس زمینه آن عوض می شود.
Mouse Events
زمانی که موس روی عنصر حرکت می کند، رنگ آن تغییر می کند.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 34802
دیدگاه‌ها
سلام خسته نباشید من میخواستم زمانی که روی دکمه ی توی صفحه ی فرم کلیلک میشه loading شروع به چرخیدن کنه چه کد هایی باید بنویسم؟
سلام خسته نباشید مرسی از مطالب خوبتون.
من مباحث html، css و javascript رو از روی سایت خوندم و فقط تمریناتی که در حین درس بود رو نوشتم. حالا میخوام یه دفترچه تقویم مانند طراحی کنم که بالای هر صفحه تاریخ نوشته شده باشه و اینکه بشه چندکلمه ای هم توی صفحه مورد نظر نوشت . و همچنین قابلیت لمسی داشته باشه. یعنی با حرکت دست ورق بخوره. میشه لطفا راهنماییم کنید از کجا و چطور باید شروع کنم؟
سلام شما می توانید یک Application اندرویدی برای این منظور طراحی کنید. در واقع نرم افزار مذکور که یک دفترچه با مثال های فراوان است می تواند روی گوشی های مبایل و همچنین تبلت ها نصب شود.
بنابراین شما باید با برنامه نویسی اندروید آشنا شوید. پیشنهاد می کنم از منوها بالای سایت، "بیاموز اندروید" را انتخاب کنید و شروع به مطالعه این قسمت نمایید و یا می توانید از فیلم آموزش اندروید که لینک آنرا در پایین برایتان قرار دادم استفاده نمایید:
beyamooz.com/product/android
سلام و خسته نباشید
باتشکر از آموزش خوبتون
من میخوام با جاوا اسکریپت یک tab درست کنم که از یک سری عکس درست شده و میخوام با کلیک بر روی هر عکس یک نوشته مشخصی رو نمایش بده
میدونم که باید برای نوشته هام id تعریف کنم و برای هر عکس یک کلاس ولی نمیدونم توی جاوا چطور پیاده سازیش کنم
ممنون میشم کمکم کنید با تشکر
با سلام و تشکر.
راهکار منطقی این هست که نوشته‌ی موردنظر رو به طریقی به عکس مربوطه وصل کنید. یعنی در هر دو یک خصوصیات یا دیتای واحدی بذارید که مشخص کنه این متن مرتبط با عکس موردنظر هست. سپس در رویداد عکس، مشخص کنید که با کلیک روی این عکس، این متن رو نمایش بده.
مثلا فرض کنید عکس‌های ما به صورت زیر هست:
<img src="image s/1.jpg" id="img1&q uot; onclick="S howText(1);&quo t; /><br> <span id="show1"></span>
<img src="image s/2.jpg" id="img2&q uot; onclick="S howText(2);&quo t; /><br> <span id="show2"></span>
<img src="image s/3.jpg" id="img3&q uot; onclick="S howText(3);&quo t; /><br> <span id="show3"></span>
<img src="image s/4.jpg" id="img4&q uot; onclick="S howText(4);&quo t; /><br> <span id="show4"></span>
<img src="image s/5.jpg" id="img5&q uot; onclick="S howText(5);&quo t; /><br> <span id="show5"></span>
حالا متنها رو به صورت زیر تعریف کنید:
<div id="text1& quot; data-id="1 ">This is a Text 1.</div>
<div id="text2& quot; data-id="2 ">This is a Text 2.</div>
<div id="text3& quot; data-id="3 ">This is a Text 3.</div>
<div id="text4& quot; data-id="4 ">This is a Text 4.</div>
<div id="text5& quot; data-id="5 ">This is a Text 5.</div>
حالا تابع زیر رو بنویسید:
<script type="text /javascript&quo t;>
function ShowText(num){
var str = document.getEle mentById(" text"+num) .innerHTML;
document.getEle mentById(" show"+num) .innerHTML = str;
alert(str);
}
</script>
سعی کردم خیلی ساده کد رو بنویسم تا قابل درک باشه. والّا را‌ه‌های ساده‌تر و بهتری هم برای نوشتن این کد هست.
اگر منطق برنامه رو کمی بهش دقت کنید، درکش خیلی راحته و متوجه میشید که برنامه چی کار داره میکنه.
سلام! من میخوام یک رویداد بنویسم که اگر روی هر جای سند کلیک شد بک گراند body بشه مثلا قرمز!
ولی اگه روی یک پاراگراف خاص کلیک شد بک گرداند بشه آبی!
هر کار میکنم بک گراند قرمز میشه و انگار اصلا در نظر نمیگیره تابع پاراگراف رو! انگار سند الویت داره به همه ی عناصر!
میدونین چجوری میشه این مشکل رو حل کرد؟
با سلام.
کد زیر کار میکنه، ولی کامل نیست. اگه روی پاراگراف کلیک کنید، فقط پاراگراف رنگی میشه، ولی اگه جایی غیر از پاراگراف و داخل تگ body کلیک کنید، بدنه رنگ میشه.
میتونید با کمی برنامه نویسی اون رو مطابق سلیقه خودتون در بیارید.<!doctype html>
<html>
<head>
<meta charset="u tf-8">
<title>CO DE</title> ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var p = 0;
$(document).ready(function(){
$("body").click(function(){
if(!p){
$(this).css({"background-color" : "red"});
}
p = 0;
});
$("p").click(function(){
p++;
$(this).css({"background-color" : "green"});
});
});
</script>
</head>
<body>
<div>div</div>
<p>paragraph 1</p>
<div>
<p>paragraph 2</p>
<span>span</span>
</div>
</body>
</html>
در ضمن انجمن سایت بیاموز به آدرس http://beyamooz.com/forum راه اندازی گردید. از این پس میتوانید با درج سؤال خود در انجمن، علاوه بر پاسخ سریع، از نظرات دیگر کاربران هم بهره مند گردید.
با تشکر
ممنون از پاسختتون! ولی این که با جی کویری هستش و خودم هم میدونستم! میخواستم بدونم جی کویری چجوری از جاوا به این کد رسیده!
برای بادی از document.body.c lick استفاده کنید و برای پاراگراف از document.getEle mentByClass استفاده کنید.
this و obj چیست ؟
عبارت this به عنصر جاری اشاره می کند.
ببینید یک ابهام برام ایجاد شده
بجای اینکه از رویداد onClick استفاده کنیم میتوانیم بگوییم اگه روی این دکمه کلیک شد؛فلان اتفاق بیافتد؟!
خب روی همین دکمه ای که شما می گویید هم عمل کلیک اتفاق می افته! به عبارت دیگر از onclick استفاده می شود.
ببخشید این سوال را اینجا می پرسم
---------------------------------------
یک المان دارم ،که بصورت "none"است یعنی مخفی است.
میخام وقتی که کاربر روی یک لینکی کلیک کرد ؛خاصیت عنصر دیو به visible تغییر کند
با تشکر
با سلام خدمت شما کاربر عزیز
می توانیم با استفاده از یک تابع در جاوا اسکریپت وضعیت مخفی بودن عنصر را چک کنیم در صورتی که مخفی بود آن را نمایش می دهیم. کد زیر سوال شما را دقیقاً پاسخ می دهد:
<!DOCTYPE html>
<html>
<body>
<div onClick="show(s econd_Div)" style="backgrou nd-color:#D94A3 8;width:90px;he ight:20px;paddi ng:40px;">Cl ick Me</div>
<div id="second_Div" style= "display:none ; background-colo r:#ccc;width:90 px;height:20px; padding:40px;"" > hello
</div>
<script>
function show(obj)
{ if(obj.style.display=="none")
{ obj.style.displ ay="block"; }
else { obj.style.displ ay="none"; }
}
</script>
</body>
</html>
من بجاش این کد را نوشتم نمی دونم چرا درست عمل نمی کنه؟!
document.getElementsByClassName("ftarget").onclick=showtarget();
function showtarget(){
document.getElementById("target").style.display="block"
---------------------------------------------------------------------------
ftarget:نام کلاس یکسری لینکه؛که وقتی روش کلید شه باید دیو که آی دی تارگت را داره نمایش داده بشه
-----------------------------------------------------------------------------------
آیا کد بالا اشکال دارد؛چون میخام وقتی که روی لینک کلید شد دو من نمایش داده شود ؛در حالت فعلی همینطوری نمایش میدهد؟؟؟
----------------------------------------------------------------
در ضمن اگر جواب سوال را بگیرم به سایت شما کمک نقدی خواهم کرد.
با سلام خدمت شما دوست عزیز
با اینکه سوالت کمی مبهمه ولی فکر کنم از کد زیر باید استفاده کنید:
var elements = document.getElementsByClassName('ftarget');
for(var i = 0, len = elements.length ; i < len; i++) {
elements.onclic k = function () {
document.getElementById("target").style.display="block";
trackOutboundLi nk(this.href);
return false;
}
}
دقت بفرمایید که getElementsByCl assName آرایه ای از عناصر را بر می گرداند. ما این عناصر را در یک آرایه با نام elements ذخیره کرده ایم. برای انتساب رویداد باید روی تک تک این عناصر حرکت کنیم (حلقه ی for) و به ازای تک تک عناصر رویداد onClick را تعریف می کنیم.
با اینکه زیاد متوجه نشدم؛ولی کمکتان(نقدی) کردم ؛در حد خرید یک کارت شارژ :)
هر وقت که جواب سوال راگرفتم تصمیم گرفتم کمک کنم .از این به بعد شارژهاتون با من. ;)