AddEventListener () / संलग्नक () का सही उपयोग?

Question 1

मैं सोच रहा हूँ कि addEventListenerक्रमशः attachEventसही ढंग से कैसे उपयोग करें ?

window.onload = function (myFunc1) { /* do something */ }

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

या

function myFunc1() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc1);
}

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

?

क्या यह क्रॉस-ब्राउज़र सुरक्षित है या मुझे इस तरह से कुछ बेहतर करना चाहिए:

function myFunc1(){ /* do something */ }
function myFunc2(){ /* do something */ }
// ...

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

addOnloadEvent(myFunc1);
addOnloadEvent(myFunc2);
// ...

और: कहना myfunc2केवल IE 7 के लिए है। तदनुसार सही / पसंदीदा विधि को कैसे संशोधित किया जाए?

Question 2

दोनों का उपयोग समान है, हालांकि दोनों इवेंट पैरामीटर के लिए थोड़ा अलग सिंटैक्स लेते हैं:

addEventListener ( mdn संदर्भ ):

सभी प्रमुख ब्राउज़रों (FF, Chrome, Edge) द्वारा समर्थित

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

घटनाक्रम की सूची के लिए addEventListener।

संलग्नक ( msdn संदर्भ ):

IE 5-8 * द्वारा समर्थित

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

घटनाक्रम की सूची के लिए attachEvent।

बहस

दोनों विधियों के लिए तर्क निम्नानुसार हैं:

घटना प्रकार है।
क्या घटना शुरू होने के बाद कॉल करने का कार्य है।
( addEventListenerकेवल) यदि सही है, तो इंगित करता है कि उपयोगकर्ता कैप्चर आरंभ करना चाहता है ।

व्याख्या

किसी तत्व को एक घटना को संलग्न करने के समान लक्ष्य को प्राप्त करने के लिए दोनों विधियों का उपयोग किया जाता है।
अंतर किया जा रहा है वह यह है कि attachEventकेवल पुराने पर इस्तेमाल किया जा सकता त्रिशूल प्रतिपादन इंजन ( ~~IE5 +~~ IE5-8 *) और addEventListenerएक डब्ल्यू 3 मानक है जो अन्य ब्राउज़र (एफएफ, वेबकिट, ओपेरा, IE9 +) के बहुमत में कार्यान्वित किया जाता है।

नॉर्मलाइज़ेशन सहित सॉलिड क्रॉस ब्राउज़र इवेंट सपोर्ट के लिए जो आपको डियाज़ समाधान के साथ नहीं मिलेगा, एक फ्रेमवर्क का उपयोग करें ।

* IE9-10 बैकवर्ड संगतता के लिए दोनों तरीकों का समर्थन करता है।

IE11 से हटा दिया गया है कि बाहर की ओर इशारा करने के लिए ल्यूक पुलेट को धन्यवाद attachEvent।

न्यूनतम पार ब्राउज़र कार्यान्वयन

जैसा कि स्माइली ने सिफारिश की थी कि आपको इस डस्टिन डियाज़ पर एक नज़र डालनी चाहिए एक फ्रेम के उपयोग के बिना एक ठोस क्रॉस ब्राउज़र कार्यान्वयन के लिए:

function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    obj.attachEvent("on"+type, obj[type+fn]);
  }
  else {
    obj["on"+type] = obj["e"+type+fn];
  }
}

addEvent( document, 'click', function (e) {
  console.log( 'document click' )
})

स्निपेट का विस्तार करें

Question 3

अभी भी कोई भी इस चर्चा को टाल रहा है और वह जवाब नहीं खोज रहा है जो वे चेकआउट के लिए देख रहे थे:
http://dustindiaz.com/rock-solid-addevent

यह सबसे सुंदर समाधानों में से एक है जो मुझे उन लोगों के लिए मिला है जो चौखटे का उपयोग करने पर प्रतिबंध लगाते हैं।

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    } else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }

}

var EventCache = function() {

    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;

            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };

                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };

                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };

                item[0][item[1]] = null;
            };
        }
    };
}();

addEvent(window, 'unload', EventCache.flush);