في تطوير التطبيق الفعلي، غالبًا ما نستخدم أحداث وحدة JS، ولكن في بعض الأحيان نواجه بعض المشكلات، مثل أحداث النقر، للحصول على مثال بسيط، انقر فوق الزر "إرسال" خارج النموذج لإرسال النموذج. دعونا نرمز.
أتش تي أم أل:
انسخ رمز الكود كما يلي:
<h3> يرجى النقر على "إرسال"، وسيتم أيضًا تشغيل حدث النقر على زر إرسال الاختبار. </h3>
<button id="btn">إرسال</button>
<إجراء النموذج = "#" طريقة = "الحصول على" معرف = "نموذج">
<نوع الإدخال = "نص" اسم = "موقع" قيمة = "www.woiweb.net" للقراءة فقط/>
<input id="subbtn" type="submit" value="لا تنقر على هذا الزر للإرسال بعد" onclick="alert('لقد قمت بالإرسال');"/>
</النموذج>
جافا سكريبت:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
// الطريقة العامة
بتن.ونكليك = وظيفة () {
sub.click();
}
</script>
بعد الاختبار، لا توجد مشاكل مع IE وFF وChrome وOpera وSafari، ويمكن إرسال النموذج بشكل طبيعي.
ولكن في التصميم الفعلي، من أجل جعل أزرار الإرسال تبدو أفضل، غالبًا ما يستخدم المنشئون علامة لمعالجتها وإضافة صورة خلفية لمحاكاة الزر، وما زلنا نستخدم الفكرة المذكورة أعلاه لمحاولة إضافة علامة للسماح لها بالإرسال النموذج، نقوم بتعديل HTML فقط.
أتش تي أم أل:
انسخ رمز الكود كما يلي:
<h3> برجاء النقر فوق "إرسال"، وسيتم أيضًا تشغيل حدث النقر الخاص بزر إرسال الاختبار. </h3>
<button id="btn">إرسال</button>
<إجراء النموذج = "#" طريقة = "الحصول على" معرف = "نموذج">
<نوع الإدخال = "نص" اسم = "موقع" قيمة = "www.woiweb.net" للقراءة فقط/>
<!--<input id="subbtn" type="submit" value="لا تنقر على هذا الزر للإرسال بعد" onclick="alert('لقد قمت بالإرسال');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('اتصل بالطريقة لإرسال النموذج هنا')">زر محاكاة الإرسال</a>
</النموذج>
جافا سكريبت:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
// الطريقة العامة
بتن.ونكليك = وظيفة () {
sub.click();
}
</script>
بعد التشغيل، حدثت المشكلة. كان كل من IE وFF وOpera على ما يرام، لكن لم يتمكن Chrome وSafari من العمل بشكل طبيعي. لاحقًا، بحثت عبر الإنترنت ووجدت أن التسمية لا تحتوي على نفس حدث onclick() مثل الزر. الحل هو أن IE و FF يكتبان منطقًا مختلفًا، ورمز JS هو كما يلي:
جافا سكريبت:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
// الطريقة العامة
بتن.ونكليك = وظيفة () {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} آخر {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
sub.dispatchEvent(e);
}
}
</script>
في هذه المرحلة تم حل المشكلة، على الرغم من أن هذه المشكلة بسيطة جدًا، إلا أنه من السهل تجاهلها من قبل الجميع، وقد قمت بنشرها لمشاركتها مع الجميع.
القواعد:
إنشاء حدث (نوع الحدث)
وصف المعلمة
EventType هو اسم وحدة الحدث لكائن الحدث الذي تريد الحصول عليه. راجع قسم الوصف للحصول على قائمة بأنواع الأحداث الصالحة.
قيمة الإرجاع
إرجاع كائن حدث تم إنشاؤه حديثًا من النوع المحدد.
يرمي
إذا كان التنفيذ يدعم نوع الحدث المطلوب، فستقوم هذه الطريقة بطرح DOMException بالكود NOT_SUPPORTED_ERR.
يوضح
تقوم هذه الطريقة بإنشاء نوع حدث جديد محدد بواسطة معلمة eventsType. لاحظ أن قيمة هذه المعلمة ليست اسم واجهة الحدث المراد إنشاؤها، ولكن اسم وحدة DOM التي تحدد تلك الواجهة.
يسرد الجدول التالي القيم القانونية لـeventType وواجهة الحدث التي تم إنشاؤها بواسطة كل قيمة:
طريقة تهيئة واجهة حدث المعلمة
HTMLEvents HTMLEvent iniEvent()
أحداث الماوس MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
بعد إنشاء كائن الحدث باستخدام هذه الطريقة، يجب تهيئة الكائن باستخدام طريقة التهيئة الموضحة في الجدول أعلاه. لمزيد من المعلومات حول أساليب التهيئة، راجع مرجع كائن الحدث.
في الواقع، لم يتم تعريف هذه الطريقة من خلال واجهة Document، ولكن من خلال واجهة DocumentEvent. إذا كان التنفيذ يدعم وحدة الحدث، فإن كائن المستند ينفذ واجهة DocumentEvent ويدعم هذه الطريقة.