javascript - जावास्क्रिप्ट में घटना की प्राथमिकता क्या है?




javascript-events event-handling event-queue (4)

जावास्क्रिप्ट में घटनाओं का किस क्रम को संभाला जाता है?

वर्णमाला क्रम में घटनाएं यहां दी गई हैं ...

  1. ऑनबॉर्ट - किसी छवि की लोडिंग बाधित है
  2. ऑनब्लर - एक तत्व फोकस खो देता है
  3. बदले - उपयोगकर्ता एक क्षेत्र की सामग्री को बदलता है
  4. ऑनक्लिक - माउस ऑब्जेक्ट पर क्लिक करता है
  5. ऑनडब्लक्लिक - माउस ऑब्जेक्ट को डबल-क्लिक करता है
  6. आतंक - दस्तावेज़ या छवि लोड करते समय एक त्रुटि होती है
  7. ऑनफोकस - एक तत्व फोकस हो जाता है
  8. ऑनकीडाउन - एक कुंजीपटल कुंजी दबाया जाता है
  9. ऑनकीप्रेस - एक कुंजीपटल कुंजी दबाया जाता है या दबाया जाता है
  10. ऑनकीप - एक कुंजीपटल कुंजी जारी की जाती है
  11. ऑनलोड - एक पृष्ठ या एक छवि लोडिंग समाप्त हो गया है
  12. onmousedown - एक माउस बटन दबाया जाता है
  13. onmousemove - माउस ले जाया गया है
  14. onmouseout - माउस एक तत्व से बाहर ले जाया गया है
  15. onmouseover - माउस एक तत्व पर ले जाया गया है
  16. onmouseup - एक माउस बटन जारी किया जाता है
  17. ऑनसेट - रीसेट बटन क्लिक किया गया है
  18. onresize - एक खिड़की या फ्रेम का आकार बदल गया है
  19. अचयनित करें - पाठ का चयन किया गया है
  20. ऑनसमेट - सबमिट बटन क्लिक किया गया है
  21. ऑननलोड - उपयोगकर्ता पृष्ठ से बाहर निकलता है

घटना कतार से उन्हें किस आदेश से संभाला जाता है?

प्राथमिकता पहले-इन-फर्स्ट-आउट (एफआईएफओ) नहीं है या इसलिए मुझे विश्वास है।


Answers

यह अब तक नहीं था, जैसा कि मुझे पता है, अतीत में स्पष्ट रूप से परिभाषित किया गया था। अलग-अलग ब्राउज़र इवेंट ऑर्डरिंग को लागू करने के लिए स्वतंत्र हैं हालांकि वे फिट दिखाई देते हैं। जबकि अधिकांश व्यावहारिक उद्देश्यों के लिए काफी करीब हैं, वहीं कुछ अजीब किनारे के मामले रहे हैं और जहां कुछ ब्राउज़र अलग-अलग होते हैं (और, ज़ाहिर है, कुछ और मामले जहां कुछ ब्राउज़र कुछ घटनाएं भेजने में विफल रहते हैं)।

उस ने कहा, एचटीएमएल 5 मसौदा सिफारिश यह निर्दिष्ट करने का प्रयास करती है कि घटनाओं को कतारबद्ध और प्रेषित किया जाएगा - इवेंट लूप :

घटनाओं को समन्वयित करने के लिए, उपयोगकर्ता इंटरैक्शन, स्क्रिप्ट्स, प्रतिपादन, नेटवर्किंग, और बहुत आगे, उपयोगकर्ता एजेंटों को इस खंड में वर्णित घटना loops का उपयोग करना होगा।

उपयोगकर्ता एजेंट प्रति कम से कम एक ईवेंट लूप होना चाहिए, और संबंधित समान-मूल ब्राउज़िंग संदर्भों की प्रति इकाई अधिकांश एक ईवेंट लूप पर होना चाहिए।

एक ईवेंट लूप में एक या अधिक कार्य कतार हैं। कार्य कतार कार्य की एक आदेशित सूची है [...] जब कोई उपयोगकर्ता एजेंट किसी कार्य को कतारबद्ध करना होता है, तो उसे दिए गए कार्य को प्रासंगिक ईवेंट लूप की कार्य पंक्तियों में से एक में जोड़ना होगा। एक विशेष कार्य स्रोत से सभी कार्यों को हमेशा एक ही कार्य कतार में जोड़ा जाना चाहिए, लेकिन विभिन्न कार्य स्रोतों से कार्य अलग-अलग कार्य पंक्तियों में रखा जा सकता है। [...]

[...] उपयोगकर्ता एजेंट के पास माउस और कुंजी ईवेंट (उपयोगकर्ता इंटरैक्शन कार्य स्रोत) के लिए एक कार्य कतार हो सकती है, और अन्य सभी चीज़ों के लिए। उपयोगकर्ता एजेंट तब अन्य कार्यों पर कुंजीपटल और माउस इवेंट वरीयता दे सकता है, जो इंटरफ़ेस को उत्तरदायी रखता है लेकिन अन्य कार्य कतारों को भूखा नहीं करता है, और ऑर्डर के बाहर किसी एक कार्य स्रोत से घटनाओं को संसाधित नहीं करता है। [...]

ध्यान दें कि आखिरी बिट: यह निर्धारित करने के लिए ब्राउज़र कार्यान्वयन पर निर्भर करता है कि कौन सी घटनाओं को एक साथ समूहीकृत किया जाएगा और क्रमशः संसाधित किया जाएगा, साथ ही साथ किसी विशेष प्रकार की घटना को दी गई प्राथमिकता भी दी जाएगी। इसलिए, सभी ब्राउज़रों को अब या भविष्य में, सभी निश्चित घटनाओं में सभी घटनाओं को प्रेषित करने की अपेक्षा करने का कोई कारण नहीं है।


अनुक्रमित घटनाओं को जानने के इच्छुक किसी भी व्यक्ति के लिए, नीचे देखें। अब तक मैंने केवल क्रोम में परीक्षण किया है।

  1. ऊपर टहलना
  2. MouseMove
  3. mouseout
  1. माउस नीचे
  2. बदलें (केंद्रित इनपुट पर)
  3. धुंध (केंद्रित तत्व पर)
  4. फोकस
  5. mouseup
  6. क्लिक
  7. dblclick
  1. चाबी नीचे
  2. बटन दबाओ
  3. तनाव के स्थिति में

यदि आप माउस / टच इवेंट्स देख रहे हैं, तो पैट्रिक एच। लॉके ने इस विषय पर एक वार्ता प्रकाशित की है । निश्चित रूप से एक दिलचस्प पढ़ा - और विभिन्न ब्राउज़रों, विभिन्न उपकरणों और विभिन्न मानकों के सभी quirks के साथ सौदों।

वह परीक्षणों का एक व्यापक सेट भी बंडल करता है


स्ट्रॉ मैन

मुझे यह जानने की जरूरत है कि बटन कितनी बार क्लिक किया गया है और प्रत्येक तीसरे क्लिक पर कुछ करें ...

काफी स्पष्ट समाधान

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});
<button id="button">Click Me!</button>

अब यह काम करेगा, लेकिन यह एक चर जोड़कर बाहरी दायरे में अतिक्रमण करता है, जिसका एकमात्र उद्देश्य गिनती का ट्रैक रखना है। कुछ स्थितियों में, यह बेहतर होगा क्योंकि आपके बाहरी एप्लिकेशन को इस जानकारी तक पहुंच की आवश्यकता हो सकती है। लेकिन इस मामले में, हम केवल हर तीसरे क्लिक के व्यवहार को बदल रहे हैं, इसलिए इवेंट हैंडलर के अंदर इस कार्यक्षमता को संलग्न करना बेहतर है।

इस विकल्प पर विचार करें

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

यहां कुछ चीजें ध्यान दें।

उपर्युक्त उदाहरण में, मैं जावास्क्रिप्ट के बंद व्यवहार का उपयोग कर रहा हूं। यह व्यवहार किसी भी फ़ंक्शन को उस दायरे तक पहुंचने की अनुमति देता है जिसमें इसे बनाया गया था, अनिश्चित काल तक। व्यावहारिक रूप से इसे लागू करने के लिए, मैं तुरंत एक फ़ंक्शन का आह्वान करता हूं जो एक और फ़ंक्शन देता है, और क्योंकि जिस फ़ंक्शन को मैं वापस कर रहा हूं, उसके पास आंतरिक गिनती चर (ऊपर वर्णित बंद व्यवहार के कारण) तक पहुंच है जिसके परिणामस्वरूप परिणामस्वरूप उपयोग के लिए एक निजी दायरा है समारोह ... इतना आसान नहीं है? चलो इसे पतला कर दें ...

एक साधारण एक लाइन बंद

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

लौटाए गए फ़ंक्शन के बाहर सभी चर लौटाए गए फ़ंक्शन पर उपलब्ध हैं, लेकिन वे लौटाए गए फ़ंक्शन ऑब्जेक्ट पर सीधे उपलब्ध नहीं हैं ...

func();  // Alerts "val"
func.a;  // Undefined

उसे ले लो? तो हमारे प्राथमिक उदाहरण में, गिनती चर बंद होने के भीतर निहित है और हमेशा ईवेंट हैंडलर के लिए उपलब्ध है, इसलिए यह क्लिक से क्लिक करने के लिए अपने राज्य को बरकरार रखता है।

साथ ही, यह निजी परिवर्तनीय स्थिति पूरी तरह से सुलभ है, दोनों रीडिंग्स और इसके निजी स्कॉप्ड वेरिएबल्स को असाइन करने के लिए।

तुम वहाँ जाओ; अब आप इस व्यवहार को पूरी तरह से समाहित कर रहे हैं।

पूर्ण ब्लॉग पोस्ट (jQuery विचारों सहित)





javascript javascript-events event-handling event-queue