استخدام oninput، onpropertychange، onchange
يجب أن يستوفي حدث مشغل onchange شرطين:
أ) تتغير خصائص الكائن الحالي ويتم تشغيلها بواسطة أحداث لوحة المفاتيح أو الماوس (تشغيل البرنامج النصي غير صالح)
ب) يفقد الكائن الحالي التركيز (onblur)؛
في حالة onpropertychange، طالما تغيرت خصائص الكائن الحالي، فسيتم تشغيل الحدث، ولكنه حصري لـ IE؛
oninput هو إصدار متصفح غير تابع لـ IE من onpropertychange، وهو يدعم متصفحات مثل Firefox وOpera، ولكن هناك اختلاف واحد عندما يكون مرتبطًا بكائن ما، لا يمكن لجميع تغييرات خصائص الكائن أن تتغير إلا عندما تغييرات قيمة الكائن.
وقف محتدما الأحداث
إذا (هـ) // إيقاف ظهور فقاعات الحدث e.stopPropagation();
else window.event.cancelBubble = true;
قم بتنفيذ الكود أعلاه وانقر على مربع الإدخال لتجد أن onpropertychange سيتم تشغيله أيضًا. سيؤدي إدخال قيمة إلى تشغيل هذا الحدث أيضًا. وهذا يثبت أنه طالما تم تعديل قيمة الخاصية، فسيتم تشغيل هذا الحدث.
ثانيًا، الآن بعد أن اكتشفنا هذه الميزة، ستكون هناك مشكلة: في بعض الأحيان عندما نرغب في إجراء عملية دالة عندما تتغير قيمة مربع الإدخال، لكننا نحتاج أيضًا إلى تعديل سمة مخصصة، لذلك سيتم تشغيل onpropertychange مرتين، هذا قد لا يكون ما نريد.
مجرد تخمين، بما أن هذه السمة متوفرة، فمن المفترض أن تكون قادرًا على معرفة السمة التي تم تغييرها. حاول الحصول على عدد المعلمات ومحتواها.
رمز XML/HTML
انسخ رمز الكود كما يلي:
<نوع الإدخال = "نص" قيمة = "XXX" معرف = "xx" onclick = "this.myprop = 'xx'">
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
تنبيه (الوسائط. الطول)؛
for(var i=0;i<arguments.length;i++){
تنبيه(الوسائط[i]);
}
});
-->
</script>
عند تنفيذ التعليمات البرمجية أعلاه، ستجد أن 1 و[object] منبثقان، مما يوضح أن الحدث يمرر معلمة واحدة فقط إلى وظيفة رد الاتصال وهو كائن من النوع.
ثم دعونا نحاول اجتياز هذا الكائن.
رمز XML/HTML
انسخ رمز الكود كما يلي:
<نوع الإدخال = "نص" قيمة = "XXX" معرف = "xx" onclick = "this.myprop = 'xx'">
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
ل(عنصر var في o){
تنبيه(item+":":+o[item]);
}
});
//-->
</script>
وبعد تنفيذها نجد أن هناك العديد من السمات، ولكن إذا نظرنا جيدًا قد نجد مثل هذه السمة: propertyname وأعتقد أن الجميع يمكنهم تخمين معنى هذه السمة. نعم، يُستخدم هذا لمعرفة السمة التي تم تعديلها.
رمز XML/HTML
انسخ رمز الكود كما يلي:
<نوع الإدخال = "نص" قيمة = "XXX" معرف = "xx" onclick = "this.myprop = 'xx'">
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
تنبيه (o.propertyName)؛
});
//-->
</script>
انقر فوق مربع النص وأدخل قيمة على التوالي، وستجد أن myprop وقيمة منبثقة على التوالي.
وبالعودة إلى السؤال الذي بدأنا به، نحتاج فقط إلى تحديد ما إذا كانت القيمة قد تغيرت.
دعونا نلقي نظرة على الكود مباشرة:
رمز XML/HTML
انسخ رمز الكود كما يلي:
<نوع الإدخال = "نص" قيمة = "XXX" معرف = "xx" onclick = "this.myprop = 'xx'">
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; // لا تقم بالعمليات التالية إلا إذا تغيرت القيمة.
// ..... معالجة الوظيفة
});
//-->
</script>