jQuery: Best way to handle multiple events for best performance -

अगर मुझे jQuery .on का उपयोग करते हुए समान तत्व में एकाधिक ईवेंट संलग्न करना होगा () , क्या मुझे सभी ईवेंट को एक कॉल में जोड़ना चाहिए और उन्हें event.type का उपयोग करके अंतर करना चाहिए? या क्या मुझे एक अलग .on () प्रत्येक ईवेंट के लिए कॉल करना चाहिए?

संयुक्त ईवेंट:

  $ ('# माउस)' पर ('माउससेंट माउसलेव क्लिक', '। आईईएलमेंट', फ़ंक्शन (इवेंट) {if (event.type == 'click') {वापसी झूठी;} else if (event.type == ' {$ (यह) .addClass ('सक्रिय');} और यदि (event.type == 'माउसलेव') {$ (यह) .removeClass ('सक्रिय');}}   
  अलग इवेंट:   
  $ ('# मुख्य')। पर ('क्लिक करें', '.myElement', फ़ंक्शन (ईवेंट) {वापसी $ ('# मुख्य')। ('माउससेंट', '। मीएलेमेंट', फ़ंक्शन (इवेंट) {$ (यह)। AddClass ('सक्रिय');} $ ('# मुख्य')। पर ( 'माउसलेवे', '.मेयलेमेंट', फ़ंक्शन (इवेंट) {$ (यह) .removeClass ('सक्रिय');}   
 कौन सा सबसे तेज़ है?  
  अतिरिक्त जानकारी:  स्पष्ट रूप से हमें दो पहलुओं पर विचार करने की जरूरत है, पहले एक तब होता है जब पृष्ठ लोड हो रहा है और उन ईवेंट हैंडलर सेट किए जा रहे हैं, जो स्पष्ट रूप से केवल एक  .on ()  कॉल करें हालांकि दूसरा पहलू यह है कि जब ये घटनाएं वास्तव में शुरू हो जाएंगी, जब । MyElement  पर आवास या क्लिक करना अधिक महत्वपूर्ण होगा, क्योंकि यह कई बार घटित होगा, जबकि  .on ()  कॉल को केवल एक बार बुलाया जाएगा (या अधिक अगर DOM बदलता है, लेकिन फिर भी घटनाओं से कम है)।   
 
 
 आपको  बाध्यकारी घटनाओं  (किसी घटना के लिए कॉलबैक संलग्न करना) के बीच अंतर करना चाहिए, और वास्तव में  ट्रिगर किए गए ईवेंट का संसाधन  (कॉलबैक / कॉलिंग / निष्पादित करना) के बीच। पहली बार केवल प्रति पृष्ठ एक बार हो सकता है, जबकि बाद में उपयोगकर्ता गतिविधि के आधार पर सौ बार हो सकता है।  
 
 
 यदि आप  ईवेंट बाइंडिंग  केवल एक???? जो दस्तावेज पर तैयार होता है (अंततः) और प्रत्येक बार DOM बदलता है (जैसे कि अजाक्स पूर्ण)। तब केवल एक कॉलबैक के साथ केवल एक  .on ()  कॉल का उपयोग करना तेज़ है:   
 
 यदि आप  घटनाओं की प्रसंस्करण पर विचार करते हैं  एक ???? (यानी उपयोगकर्ता क्लिक या माउस ओ ओवर्स  .myElement ) फिर सभी घटनाओं को एक कॉलबैक में जोड़कर और  यदि  बयानों को कई कॉलबैक होने से भी तेज किया जाता है:    
 यहां दोनों से कुछ संयुक्त परिणाम हैं परीक्षण:  
  बाध्य करने के लिए सबसे तेज़ और भी घटनाओं की प्रक्रिया के लिए सबसे तेज :  
  $ ('# मुख्य')। ('माउससेंटर माउसलेव क्लिक करें ',' .myElement ', फ़ंक्शन (इवेंट) {// ट्रिगर किए गए ईवेंट का प्रोसेसिंग: if (event.type ==' click ') {return false;} और यदि (event.type ==' mousecenter ') {$ (This) .addClass ('सक्रिय');} और यदि (event.type == 'mouseleave') {$ (this) .removeClass ('सक्रिय');}});   
  उपरोक्त कोड अनुशंसित वाक्यविन्यास है। निम्नलिखित उदाहरण केवल सूचना के लिए हैं।   
 
  बाध्य करने के बारे में 30% धीमी, और घटनाओं पर कार्रवाई करने के लिए 50% धीमी:   < पूर्व>  $ ('# मुख्य')। पर ('क्लिक करें', '.myElement', फ़ंक्शन (ईवेंट) {वापसी झूठी;}); $ ('# मुख्य')। ('माउससेंटर', '। मीएलेमेंट', फ़ंक्शन (ईवेंट) {$ (यह) .addClass ('सक्रिय');}); $ ('# मुख्य')। ('माउसलेव', '। मीएलेमेंट', फ़ंक्शन (इवेंट) {$ (यह) .removeClass ('सक्रिय');});   
  बाध्य करने के लिए धीमी, और घटनाओं पर कार्रवाई करने के लिए धीमी गति से 70%:   
  $ ('# मुख्य')। पर ({mouseenter: function () {$ (this) .addClass ('सक्रिय');}, माउसलेव: फ़ंक्शन () {$ (this) .removeClass ('सक्रिय');}, पर क्लिक करें: फ़ंक्शन () {return गलत;}}, '। MyElement');   
  बाध्य करने के बारे में 25% धीमी है, और घटनाओं को संसाधित करने के लिए धीमा:   
  $ ('# मुख्य') .on ('क्लिक', '। MyElement', फ़ंक्शन (इवेंट) {वापसी झूठी;}); $ ('# मुख्य') पर ('हॉवर', '। मीएलेमेंट', फ़ंक्शन (इवेंट) {$ (this) .addClass ('सक्रिय');}, फ़ंक्शन () {$ (this) .removeClass (' सक्रिय ');});   
  बाध्य करने के बारे में 20% धीमी, और घटनाओं पर कार्रवाई करने के लिए धीमी गति से 60%:   
  $ ('# main' ) (पर क्लिक करें, '। MyElement', फ़ंक्शन (इवेंट) {वापसी झूठी}}। पर ('माउससेंटर', '। मीएलेमेंट', फ़ंक्शन (इवेंट) {$ (this) .addClass ('सक्रिय' );}) पर। ('माउसलेव', '। मीएलेमेंट', फ़ंक्शन (इवेंट) {$ (यह) .removeClass ('सक्रिय');});