parsgreen.com
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>
<!-- 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>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» کار با switch و case در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (Javascript)
» تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: فریبا
زمان: ۰۱:۲۶:۰۷ - تاریخ: ۱۳۹۱/۰۴/۲۰
سلام
عالی بود.
ممکنه یه نرم افزار خوب برای کدنویسی جاوا اسکریپت معرفی کنید که اختصاصاً برای این زبان باشد؟
پاسخ: 
سلام
در برنامه های زیادی می توانید کد های جاوا اسکریپت را بنویسید، شاید ساده ترین و سبک ترین آن ++Notepad باشد، در آدرس:
http://notepad-plus-plus.org
برنامه aptana هم گزینه مناسبی برای کسانی است که با دنیای open source کد می نویسند، در آدرس:
http://www.aptana.com
افزونه مرورگر فایرفاکس به نام Firebug هم در خطا یابی کمک می کند:
https://addons.mozilla.org/en-US/firefox/extensions/web-development/
اگر می خواهید همه ی آنها را با هم داشته باشید حتما از Adobe Dreamweaver CS استفاده کنید.
نویسنده: farhad
زمان: ۲۱:۵۰:۰۲ - تاریخ: ۱۳۹۱/۰۸/۰۷
سلام من می خواستم text field های برنامه خودم رو فیلتر کنم یعنی در قسمت ثبت نام در فیلد name فقط بتونم اسم وارد کنم اگر عدد وارد شد ارور بده و برعکس اگه میشه لطفا کدش رو بذارید ممنون
پاسخ: 
سلام
برای این کار می توانید از تابع preg_match_all استفاده کنید:
<?php
$string = 'test';
if (preg_match_all('/([0-9]+)/', $string)){
echo 'Error!';
}
else{
echo 'Ok!';
}
?>
این تابع با مقادیر regular expressions که برایش در نظر گرفته ایم، وجود عدد در مقادیر ارسالی را بررسی می کند، اگر عددی پیدا شود، قسمت خطا اجرا و در غیر این صورت ادامه برنامه اجرا می شود.
اگر هم می خواهید فقط عدد باشد و string نباشد، به صورت زیر از تابع استفاده کنید:
<?php
$string = '1234[';
if (preg_match_all('/([a-z,;[}$#.])/i', $string)){
echo 'Error!';
}
else{
echo 'Ok!';
}
?>
دقت کنید علامت هایی که بعد از a-z آمده اند هم شامل موارد غیر مجاز می شوند که می توانید بر حسب نیاز آنها را حذف یا موارد دیگری را اضافه کنید.
نویسنده: Dante
زمان: ۱۴:۴۲:۱۹ - تاریخ: ۱۳۹۱/۱۰/۲۰
من یه کد دارم که توش مقادیر x و y رو که توی دیتابیس ذخیره کرده بازیابی می کنه ولی مشکل اینجاست که اگه 100 مقدار واسه x یا y داشته باشیم همشون توی یه صفحه نشون داده می شه و حجم صفحه زیاد می شه
من می خوام که این مقدار x وقتی از دیتابیس بازیابی می شه توی دراب داون ظاهر بشه که این رو با استفاده از تگ
<option></option> می شه حل کرد ولی یه مشکلی که هست با انتخاب مقدار x از منو , مقدار y ظاهر نمی شه!!! یکی از دوستان گفتند با استفاده از javascript event onclick مشکل حل می شه ولی من نتونستم راه حلش رو پیدا بکنم
می خواستم بپرسم که ایا می شه این کار رو کرد و اگر می شه چه طوری ؟
در اخر هم از اموزشتون ممنونم
پاسخ: 
سوالتان کمی مبهم است، منظورتان از اینکه مقدار y ظاهر نمی شود مشخص نیست؟ مقدار y در کجای کد استفاده شده است، به عنوان value برای option ها؟ اگر این طور است و می خواهید با انتخاب یک آیتم از منوی کشویی، مقادیر آن در صفحه نشان داده شود، می توانید از نمونه زیر استفاده کنید:
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
document.getElementById(div).innerHTML = option;
}
}
</script>
<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, 'show');">
<option value="y-1">x-1</option>
<option value="y-2">x-2</option>
<option value="y-3">x-3</option>
<option value="y-4">x-4</option>
</select>
</form>
<div id="show"></div>
در غیر این صورت لطفا مشکلتان را با ارائه نمونه کد صفحه مطرح کنید تا دقیق تر راهنمایی کنیم.
نویسنده: Dante
زمان: ۱۷:۲۱:۲۲ - تاریخ: ۱۳۹۱/۱۰/۲۱
خیلی خوب این کد من هست
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
while($row = $db->get_row($result)){
$p3_list.="
تاريخ امتحان: {$row['date']}</br>تصوير کارنامه: </br><center><img src=\"http://bioexam.ir/engine/inc/upload/{$row['filename']}\"></center><hr>
";
}
;
خوب حالا من به این صورت می خوام که با انتخاب تاریخ امتحان از منو دراپ داون توی قسمت پایین عکسی که مربوط به اون تاریخ هست (تصویر کارنامه) نشون داده بشه
با تشکر
پاسخ: 
کدی که در پاسخ قبل برایتان نوشتیم دقیقا همین کار را انجام می دهد، کافی است در خروجی مقادیر date را به عنوان x ها و آدرس کامل تصاویر را به عنوان y ها تنظیم کنید، مثال:
<?php
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
$p3_list .= '<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, \'show\');">';
while($row = $db->get_row($result)){
$p3_list.='<option value="<img src="http://bioexam.ir/engine/inc/upload/{'.$row['filename'].'}">">'.$row['date'].'</option>';
}
$p3_list .= '</select>
</form>
<center>
<div id="show"></div>
</center>';
;
?>
البته چون ما به کدهای شما دسترسی نداریم نتوانستیم کد را تست کنیم، ولی روش کار به همین صورت است.
نکته: تابع جاوا اسکریپت را هم باید در صفحه قرار داده باشید.
نویسنده: Dante
زمان: ۰۰:۵۶:۲۴ - تاریخ: ۱۳۹۱/۱۰/۲۲
خوب اقا
یه قسمت که همون منوی کشویی هست درست شد ولی با انتخاب از منوی کشویی یا دراپ داون تصویر نشون داده نمی شه و در ضمن منظور از کد جاوا اسکریپت چیه ؟
کل کد بر اساس PHP هست و فقط برای این قسمت به پیشنهاد دوستان می خوام از جاوا استفاده بکنم
اگر این قسمت رو هم راهنمایی بفرمایید ممنون می شم
با تشکر
پاسخ: 
منظور از کد جاوا اسکریپت همان تکه کدی است که در پاسخ اول نوشتیم، باید کد را در قسمت head صفحه قرار دهید، هر کجا هم که مایل به نمایش تصاویر بودید، (یک بار) بلاک div با آی دی show را قرار دهید، اکنون با انتخاب یک مقدار از منو، رویداد onchange اجرا شده و تابع GetSelected فراخوانی می شود، این تابع (همان تابعی است که در کد جاوا اسکریپت وجود دارد) مقادیر value از option انتخاب شده را داخل بلاک show خروجی می دهد و چون این مقادیر کد html نمایش یک تصویر است، خروجی باید به صورت یک تصویر نشان داده شود.
نکته: در پاسخ قبل علامت های {} باید از قسمت متغیر filename حذف می شد (چون در آدرس تصاویر چنین علامتی نباید باشد) که از قلم افتاده بود، این علامت ها را حذف کنید، به این صورت باید باشد:
$p3_list.='<option value="<img src="http://bioexam.ir/engine/inc/upload/'.$row['filename'].'">">'.$row['date'].'</option>';
نویسنده: Dante
زمان: ۱۲:۱۳:۳۷ - تاریخ: ۱۳۹۱/۱۰/۲۲
اگر منظور شما از کد این هست
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
document.getElementById(div).innerHTML = option;
}
}
</script>
من این کد رو قرار دادم و تغییراتی که شما مد نظرتون بود رو انجام دادم ولی باز هم نشان داده نشد البته اون بلاک div و ای دی show را توی کدی که به من داده بودید , بود و احتیاجی به دوباره نوشتن نبود
ولی باز هم تصویر نشان داده نشد
پاسخ: 
همان طور که گفتیم چون به برنامه شما دسترسی نبود، امکان تست نهایی وجود نداشت، به هر صورت مشکل بررسی شد، چند ایراد مختصر وجود داشت، اما راه حل نهایی:
کد جاوا اسکریپت را زیر تگ title قرار دهید، کد قبلی را پاک کنید و کد زیر را قرار دهید:
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
var image = '<img src="http://bioexam.ir/engine/inc/upload/'+option+'">';
document.getElementById(div).innerHTML = image;
}
}
</script>
قسمت مربوط به کدهای php را هم به شکل زیر تغییر دهید:
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
$p3_list .= '<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, \'show\');">
<option value="">انتخاب کنید</option>';
while($row = $db->get_row($result)){
$p3_list.='<option value="'.$row['filename'].'">'.$row['date'].'</option>';
}
$p3_list .= '</select>
</form>
<center>
<div id="show"></div>
</center>';
;
اگر همه چیز درست باشد، برنامه شما باید عمل کند.
نکته 1: filename که برای مقادیر option value از دیتابیس فراخوانی می شود باید به صورت نام تصویر و پسوند آن باشد، به فرض image.jpg.
نکته 2: این مقادیر با متغیر image در کد جاوا اسکریپت ترکیب شده و در نهایت آدرس کامل تصویر را به صورت زیر می سازد:
http://bioexam.ir/engine/inc/upload/image.jpg
لذا تصویر مذکور باید در وب وجود داشته باشد (در آدرس فوق آپلود شده باشد).
نویسنده: Dante
زمان: ۱۶:۱۴:۱۶ - تاریخ: ۱۳۹۱/۱۰/۲۲
دستتون درد نکنه به خوبی کار کرد
با تشکر
نویسنده: سعید
زمان: ۰۱:۰۰:۳۹ - تاریخ: ۱۳۹۲/۰۴/۳۰
من تقریباً اکثر قسمت های سایت خوبتان را مطالعه کردم. سایت خیلی خوبیه. از شما بی نهایت سپاسگذارم.
سوالی که برایم پیش آمد این بود که چطور می شود یک عدد را با رویداد onclick جاوا اسکریپت در بانک اطلاعاتی mysql توسط php ذخیره کرد.
مثلاً دکمه ی like و از این قبیل من در طراحی پروژه ای که دارم می خواهم تعداد دانلود های یک مقاله را به دست آورم و به این نتیجه رسیدم که پس از کلیک روی لینک دانلود یک واحد به فیلدی که مروط به همان مقاله است باید اضافه شود. آیا می شود بدون باز شدن یک صفحه ی خالی دیگر به صورت پنهانی این کار را توسط جاوا اسکریپت انجام داد ؟
ممنون و سپاسگذارم
پاسخ: 
سلام
برای این گونه موارد باید با آژاکس (Ajax) آشنا باشید، این زبان در واقع ترکیب جاوا اسکریپت و XML است، کافی است با جاوا اسکریپت آشنایی داشته باشید، در این صورت کار با آژاکس چندان سخت نیست، آموزش ها و مثال های زیادی هم در بخش مقدماتی و هم کاربردی در سایت و در وب وجود دارد.
نویسنده: elnaz
زمان: ۱۱:۲۹:۴۳ - تاریخ: ۱۳۹۲/۰۴/۳۰
با عرض سلام می خواستم بپرسم رویداد ontype را با جاوا اسکریپت چطوری میشه نوشت؟ کار این رویداد مثل سرچ گوگله که وقتی کلماتی را در text box سرچ می کنیم همزمان با تایپ ما کلمات مربوطه که قبلا سرچ شده را میاره. با تشکر
پاسخ: 
سلام
در جاوا اسکریپت رویدادی به نام ontype نداریم، اما هدف شما با رویداد های زیر امکانپذیر است:
- برای حالت عادی که کاربر در فیلد شروع به نوشتن می کند، رویداد onkeydown یا onkeypress کاربرد دارد.
- برای مواقعی که کاربر به فرض با کلیک راست مقادیر را به اصطلاح paste می کند، از رویداد onpaste (در مرورگر IE) و oninput (در سایر مرورگرها) استفاده کنید.
نویسنده: خلیل
زمان: ۰۳:۴۴:۲۷ - تاریخ: ۱۳۹۲/۰۷/۲۷
ممنون از زحماتتون . خیلی خوب اموزش میدین .
نویسنده: رضا
زمان: ۱۶:۳۴:۵۱ - تاریخ: ۱۳۹۲/۰۸/۰۱
سلام
چطور میشه وقتی یه رویداد رخ میده اون رو در پایگاد داده ثبت کنیم مثلا یه فیلد در پایگاه داده بنام num داریم که مقدارش 1 هست حالا میخوایم با یه رویداد از طریق جاوا اسکریپت مقدارش به 2 تغییر کنه
پاسخ: 
سلام
جاوا اسکریپت تنها قابلیت اعمال تغییر در سمت کاربر (مرورگر) را دارد، برای این کار معمولا از Ajax (ترکیب جاوا اسکریپت + XML) استفاده می کنند که خود مبحث جداگانه ای دارد (به آموزش های بخش Ajax مراجعه کنید).
نویسنده: مصطفی
زمان: ۱۶:۲۹:۱۶ - تاریخ: ۱۳۹۲/۰۸/۱۳
سلام می خواستم تابعی طراحی کنم که اگه کاربر هر کجای صفحه کلیک کرد تابع فراخوانی بشه ایا راهی داره؟
پاسخ: 
سلام
می توانید از نمونه زیر استفاده کنید:
<script type="text/javascript">
window.onclick = function(){
alert('ok!');
}
</script>
نویسنده: حمید
زمان: ۲۰:۰۰:۰۳ - تاریخ: ۱۳۹۳/۰۱/۱۳
سلام من یه عکس دارم در یک بلوک که اندازه ی عکس از بلوک بزرگتره و تمام عکس دیده نمیشه حالا میخوام با رویداد زمانی که روی عکس کلیک میکنم و کلیک رو نگه می دارم (onmousedown) و ماوس رو حرکت میدم عکس هم حرکت کنه مثلا اگه ماوس رو پایین کشدم عکس هم بیاد پایین. لطفا کمک کنید نیاز دارم به این با تشکر
پاسخ: 
سلام
می توانید از کد آماده زیر استفاده کنید:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | کد آماده برای درگ و دراپ تصویر</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.dragme{
position:relative;
width:270px;
height:203px;
cursor:move;
}
#draggable{
background-color:#CCC;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function startDrag(e) {
//determine event object
if(!e){
var e = window.event;
}

//IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if(targ.className != 'dragme'){
return null;
};

//calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;

//assign default values for top and left properties
if(!targ.style.left){
targ.style.left = '0px';
};
if(!targ.style.top){
targ.style.top = '0px';
};

//calculate integer values for top and left
//properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;

//move div element
document.onmousemove = dragDiv;

return false;
}
function dragDiv(e){
if (!drag){
return null;
};
if(!e){
var e = window.event
};
var targ = e.target ? e.target : e.srcElement;
//move div element
targ.style.left = coordX + e.clientX - offsetX + 'px';
targ.style.top = coordY + e.clientY - offsetY + 'px';
return false;
}
function stopDrag(){
drag = false;
}
window.onload = function(){
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
</head>
<body>
<div id="draggable" class="dragme">"drag-and-drop image script!"</div>
<img src="flower.jpg" alt="image" title="image" class="dragme">
</body>
</html>
نویسنده: MF
زمان: ۰۹:۵۱:۱۷ - تاریخ: ۱۳۹۳/۰۱/۲۵
با سلام و احترام
این کد آماده ای که برای حمید گذاشتید خیلی جالبه اما یه سوال:
می شه تصویر را در یک مقیاس معین در صفحه سایت تعریف کرد؟ چون در این حالت عکس روی تمام صفحه سایت move می شه.
اگر راهنمایی بفرمائید ممنون می شم.
با تشکر
پاسخ: 
سلام
تست نکرده ایم، اما به نظر با محاسبه فاصله از محور X ها و Y ها بتوانید یک شرط تعیین کنید که اگر به فرض فاصله از مقدار موقعیت مورد نظر بیشتر بود، بخش Stop اجرا شود، باید آزمایش و خطا کنید.
نویسنده: مصطفی
زمان: ۱۲:۰۸:۳۵ - تاریخ: ۱۳۹۳/۰۳/۱۲
سلام چطور میشه از طریق جاوا اسکریپت یک رویداد رو حذف کنیم مثلا یه تگ دارم که روی اون رویداد onclick تعریف شده حالا میخوام onclick رو از این تگ حذف کنم
پاسخ: 
سلام
به چند شیوه این کار میسر است، می توانید کل محتوا را با استفاده از متدهایی مانند innerHTML تغییر دهید (روش ساده)، یا از تابع زیر استفاده کنید:
<script type="text/javascript">
function removeEvent(elem){
elem = document.getElementById(elem);
elem.onclick = null;
alert('removed!');
}
function test(){
alert('onclick!');
}
</script>
<input type="button" id="test" onclick="test();" value="تست">
<input type="button" onclick="removeEvent('test');" value="حذف رویداد">
به این ترتیب رویداد مورد نظر برابر null شده و در واقع حذف و بی اثر می گردد.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

5 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...