كيفية توسيع حدث onchange مع جافا سكريبت

Question

هذا سؤال ركضت في التوسع في حدث onchange في جافا سكريبت عناصر. لدي العديد من العناصر المحددة بشرط أن يكون لديك حدث Onchange متصل بكل منهم (عندما يتغيرون إلى قيم محددة، فإنه يخفي / يغلب على العناصر المعينة). أريد إضافيا أو إلحاقا مشروطا بحدث Onchange آخر بحيث تقوم بتعيين متغير عالمي إذا كان التغيير دون تعديل أو تعطيل الوظيفة السابقة المرفقة بها بالفعل. هل هناك طريقة "إلحاق" بوظيفة إضافية أو إضافة المزيد من الوظائف إلى واحد موجود بالفعل؟

هنا هو ما أعتقد أنه سيكون مثالا:

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    document.getElementById("selectbox1").onchange = function () { 
        //hides elements to reduce clutter on a web form ...
    }
}
....
if (<other conditions>) {
    document.getElementById("selectbox1").onchange = function2 () {
        //set global variable to false
    }
}

بدلا من ذلك، أود ببساطة إضافة "تعيين متغير عالمي" بطانة 1 إلى الوظيفة الأصلية "إلى الوظيفة الأصلية.

Answer 1

يمكنك الغش ببساطة امتلاك وظيفة مركبة تستدعي الوظائف الأخرى.

document.getElementById("selectbox1").onchange = function() {
    function1();
    function2();
}

يمكنك أيضا استخدام نمط المراقب، الموصوف في الكتاب أنماط تصميم جافا سكريبت برو. وبعد لدي مثال على استخدامه في مقال (هنا).

//– publisher class — 
function Publisher() { 
    this.subscribers = []; 
};

Publisher.prototype.deliver = function(data) { 
    this.subscribers.forEach(function(fn) { fn(data); }); 
};

//– subscribe method to all existing objects 
Function.prototype.subscribe = function(publisher) { 
    var that = this; 
    var alreadyExists = publisher.subscribers.some(function(el) { 
        if (el === that) { 
            return; 
        } 
    });

    if (!alreadyExists) { 
        publisher.subscribers.push(this); 
    } 
    return this; 
};

Answer 2

تريد أن تنظر إلى addEventListener() و attachEvent() وظائف (للمتصفحات المستندة إلى موزيلا و IE على التوالي).

ألق نظرة على مستندات addeventlistener () و attachevent ().

var el = document.getElementById("selectbox1");

try { //For IE
    el.attachEvent("onchange", function(){ code here.. });
}
catch(e) { //For FF, Opera, Safari etc
    el.addEventListener("change", function(){ code here.. }, false);
}

يمكنك إضافة مستمعين متعددين إلى كل عنصر، وبالتالي يمكن استدعاء أكثر من وظيفة واحدة عند حرائق الحدث.

Answer 3

يمكنك استخدام jquery؟ هذا سيسمح لك بربط / التلاعب / إلغاء الأحداث بسهولة. يتم تنشيط العقبة الوحيدة لمعالجات الأحداث بالترتيب الذي يحملونه.

if (<certain conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

if (<other conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

ويمكنك أيضا أن ننظر في تشغيل أحداث مخصصة، إذا كانت احتياجاتك معقدة. على سبيل المثال، بدلا من "تفسير" Onchange، ربما هناك طريقة لتحريك الأحداث المخصصة على وجه التحديد. انظر مثال على ذلك في صفحة مسج.

Answer 4

إذا كنت تستخدم JQuery، فسيكون لديك شيء من هذا القبيل

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    $("#selectbox1").change(function () { 
        //hides elements to reduce clutter on a web form ...
    });
}
....
if (<other conditions>) {
    $("#selectbox1").change(function () { 
        //set global variable to false
    });
}

هذا سوف يعتني في الغالب توافق المتصفح كذلك.

Answer 5

يوجد حاليا ثلاث طرق مختلفة لتحديد معالجات الأحداث (وظيفة أطلقت عند اكتشاف حدث معين): الطريقة التقليدية وطريقة W3C وطريقة Microsoft.

الطريقة التقليدية

في الطريقة التقليدية، يتم تعريف معالجات الأحداث عن طريق إعداد التشغيلحدث خاصية عنصر في JavaScript (كما تفعل في رمز المثال الخاص بك)، أو عن طريق تعيين التشغيلحدث السمة في علامة HTML (مثل <select onchange="...">). في حين أن هذه هي أبسط طريقة للاستخدام، فإن استخدامه هو عبوس الآن، لأنه كما اكتشفت، فمن الصلبة إلى حد ما - ليس من السهل إضافة ومعالجات الأحداث إلى عنصر يحتوي بالفعل على معالج الأحداث المرفقة بالفعل. كذلك، فإنه لا يعتبر ممارسة مناسبة بعد الآن لخلط JavaScript مع HTML، ولكن ينبغي أن تكون موجودة داخل أو تحميلها عبر <script> بطاقة شعار.

W3C / مايكروسوفت طرق

يعرف W3C (اتحاد الويب العالمي) و Microsoft كلاهما نماذج الأحداث الخاصة بهم. تعمل النموذجان بشكل أساسي بنفس الطريقة، ولكن استخدام بناء جملة مختلفة. يتم استخدام نموذج Microsoft في Internet Explorer، ويتم استخدام نموذج W3C في متصفحات أخرى (Firefox، Opera، Safari، Chrome، إلخ). في كل من هذه النموذج، توجد وظائف مقدمة لإضافة معالجات الأحداث (AddeventListener ل W3C، Attachevent لمايكروسوفت) وإزالة معالجات الأحداث (reveyeventlistener / detachevent). هذا يسمح لك بإضافة وديناميكيا من المعالجات المحددة إلى عنصر؛ في حالتك، يمكنك إضافة المعالج الأول بناء على الشرط الأول والثاني بناء على الشرط الثاني. "المشكلة" مع هذه الأساليب هي أن هناك اثنين منهم، وبالتالي يجب استخدام كلا الطريقتين لضمان تسجيل معالج الحدث الخاص بك في جميع المتصفحات (هناك أيضا عدد قليل من الاختلافات الدقيقة بين النموذجين، لكن هذه الاختلافات ليست مهمة لنطاق هذا السؤال). في الواقع، إذا نظرت، ستجد عددا كبيرا من وظائف "Addevent" التي تستخدم كلتا الطريقتين حسب الضرورة (والعودة عموما إلى الطريقة التقليدية للمتصفحات القديمة). على سبيل المثال، تم تشغيل المسابقة على مدونة QuirksMode في عام 2005 لبناء أفضل وظيفة "Addevent"، والنتيجة التي (جنبا إلى جنب مع وظيفة الفوز) يمكنك أن ترى هنا.

كذلك، إذا كنت تستخدم مكتبة JavaScript مثل النموذج الأولي أو المسج، فهي تأتي مع وظائف معالجة الأحداث المدمجة التي ستعتني بها أعلاه.

Answer 6

القي نظرة على addEventListener - https:/developer.mozilla.org/en/dom/element.addeventlistener.

Answer 7

أشعر كما لو أنني قد أفتقد شيئا مهما حول سؤالك، ولكن هذا الحل الأكثر بساطة لا يعمل من أجلك؟

ببساطة تحقق من الظروف في داخل من حدث Onchange وأداء الإجراءات حسب الرغبة. سيكون من كثير أسهل من الاضطرار إلى إعادة إضافتها ديناميكيا / إزالة aptlisteners

document.getElementById("selectbox1").onchange = function () { 
    if (<certain conditions>) {       
     //hides elements to reduce clutter on a web form ...
    }
    if (<other conditions>) { ... }
}