PDA

View Full Version : ایجاد رویداد در جاوااسکریپت



hosseinab
جمعه 23 تیر 1391, 23:59 عصر
با سلام
من یک قطعه برنامه ایجکس برای آپلود فایل دیدم که در قسمت جاوااسکریپت اون یک رویداد را ایجاد می کند:
1- می خواستم بدونم کلا برای چی و در چه مواقعی در جاوااسکریپت یک رویداد ایجاد می کنیم؟
2- در اینجا چه نیازی برای اینکار هست؟
3- تابع addEvent دقیقا چه کاری می کنه؟

با تشکر از اساتید محترم.



function $m(theVar){
return document.getElementById(theVar)
}
function remove(theVar){
var theParent = theVar.parentNode;
theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
if(obj.addEventListener)
obj.addEventListener(evType, fn, true)
if(obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
if(obj.detachEvent){
obj.detachEvent('on'+type, fn);
}else{
obj.removeEventListener(type, fn, false);
}
}

// browser detection
function isWebKit(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
}

// send data
function ajaxUpload(form){
var detectWebKit = isWebKit();
var get_url = 'upload.php';// php file
var div_id = 'upload_area';// div id where to show uploaded image
var show_loading = '<img src="img/loading.gif" />';// loading image
var html_error = '<img src="img/error.png" />';// error image

// create iframe
var sendForm = document.createElement("iframe");
sendForm.setAttribute("id","uploadform-temp");
sendForm.setAttribute("name","uploadform-temp");
sendForm.setAttribute("width","0");
sendForm.setAttribute("height","0");
sendForm.setAttribute("border","0");
sendForm.setAttribute("style","width: 0; height: 0; border: none;");

// add to document
form.parentNode.appendChild(sendForm);
window.frames['uploadform-temp'].name="uploadform-temp";

// add event
var doUpload = function(){
removeEvent($m('uploadform-temp'),"load", doUpload);
var cross = "javascript: ";
cross += "window.parent.$m('"+div_id+"').innerHTML = document.body.innerHTML; void(0);";
$m(div_id).innerHTML = html_error;
$m('uploadform-temp').src = cross;
if(detectWebKit){
remove($m('uploadform-temp'));
}else{
setTimeout(function(){ remove($m('uploadform-temp'))}, 250);//بعد از 250میلی ثانیه تابع اجرا می شود
}
}
addEvent($m('uploadform-temp'),"load", doUpload);

// form proprietes
form.setAttribute("target","uploadform-temp");
form.setAttribute("action",get_url);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");

// loading
if(show_loading.length > 0){
$m(div_id).innerHTML = show_loading;
}
// submit
form.submit();
formDisable();
return false;
}

Variable
سه شنبه 27 تیر 1391, 00:37 صبح
فکر نمیکنم در جاوا اسکریپت رو یداد رو بشه اضاقه کرد. بلکه به عناصر تابعی برای کنترل کردن رویداد اضافه میکنند.شما برای اینکه به هر رویدادی که مورد نظرتون هست بتونید و بخاید دسترسی داشته باشید. میتونید بهش تابع کنترل کننده اون رویداد رو به اون رویداد مقیدکنید. یعنی موقع رخ دادن رویداد . یه تابع فراخونی بشه . مثلا وقتی باتنی کلیک شد. یا موس روش حرکت کرد یا فرمی سابمیت شد و ....

function addEvent(obj, evType, fn){
if(obj.addEventListener)
obj.addEventListener(evType, fn, true)
if(obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
مثلا اینجا ایف اول برای تشخیص اینکه مرورگر موزیلاست و ایف دوم برای مایکروسافت هست. که نویسنده یه تابع خودش ساخته که درونش این حالات چک میشه.
خب شما در استانداردهای قدیمی جاواسکریپت . میتونستی یک تابع رابرای کلیک اون هم به عنوان صفتی از فرم اچ تی ام ال اضافه کنی. ولی در استانداردهای جدیدترش . میتونید هر تعداد تابع رو با اضافه کردن رویداد . در موقع رخ دادنش فراخونی و اجرا کنی.