प्रेषण के साथ फोकस ईवेंट

Question

जब मैं इनपुट बॉक्स पर के साथ focus ईवेंट ट्रिगर करता हूं, तो इसके onfocus को कॉल किया जाता है, लेकिन यूआई पर इनपुट बॉक्स केंद्रित नहीं है। क्या इस व्यवहार के लिए कोई कारण है?

var test = document.getElementById("test"); 
test.onfocus = function(event) { 
    console.log('focused'); 
} 
var e = document.createEvent('Event'); 
e.initEvent("focus", true, true); 
test.dispatchEvent(e); 

दूसरी ओर यह अपेक्षा के अनुसार काम करता है।

var test = document.getElementById("test"); 
test.focus(); 

कारण मैं इस की जांच कर रहा है कि मैं ZeptoJS का उपयोग घटनाओं को गति प्रदान करने के लिए है और यह dispatchEvent उपयोग करता है।

Answer 1

जिस तत्व को आप किसी ईवेंट को आग लगाते हैं उसे उस घटना के लिए सुनना नहीं पड़ता है, संभावित रूप से, मूल तत्व उस घटना के लिए भी सुन सकता है।

ध्यान दें कि मैन्युअल रूप से किसी ईवेंट को फायर करने से उस ईवेंट से जुड़ी डिफ़ॉल्ट कार्रवाई उत्पन्न नहीं होती है। उदाहरण के लिए, focus ईवेंट को मैन्युअल रूप से फायर करने से तत्व को फोकस प्राप्त नहीं होता है (आपको इसके लिए focus() विधि का उपयोग करना होगा), submit ईवेंट मैन्युअल रूप से फ़ायरिंग करने से कोई फॉर्म सबमिट नहीं होता है (submit() विधि का उपयोग करें), मैन्युअल रूप से एक महत्वपूर्ण ईवेंट फ़ायरिंग करता है उस पत्र को एक केंद्रित टेक्स्ट इनपुट में प्रकट नहीं होने का कारण बनता है, और मैन्युअल रूप से लिंक पर क्लिक ईवेंट को फायर करने से लिंक सक्रिय नहीं होता है। यूआई घटनाओं के मामले में, सुरक्षा कारणों से यह महत्वपूर्ण है, क्योंकि यह स्क्रिप्ट को रोकता है ब्राउज़र क्रियाओं के साथ बातचीत करने वाले उपयोगकर्ता क्रियाओं को अनुकरण करने से।

यह भी ध्यान दें कि यदि आप IE पर काम कर रहे हैं तो आपको fireEvent() का उपयोग करना चाहिए। इसके अलावा, dispatchEvent और fireEvent विधियों के बीच मुख्य अंतर यह है कि dispatchEvent विधि ईवेंट की डिफ़ॉल्ट कार्रवाई को आमंत्रित करती है, fireEvent विधि नहीं है।

तो समाधान के लिए इस

test.onfocus = function(event) { 
    console.log('focused'); 
    if(! test.hasFocus()) { 
    test.focus(); 
    } 
} 

पर आप किसी भी ब्राउज़र यह परीक्षण किया है