'फोकसइन' समर्थन का पता कैसे लगाएं?

Question

Perfection kills के लिए धन्यवाद, हम घटना समर्थन का पता लगाने के लिए निम्न JavaScript का उपयोग कर सकते हैं:

function hasEvent(ev) { 
    var elem = document.createElement('a'), 
     type = 'on' + ev, 
     supported = elem[type] !== undefined; 
    if (!supported) { 
     elem.setAttribute(type, 'return;'); 
     supported = typeof elem[type] === 'function'; 
    } 
    elem = null; 
    return supported; 
} 

यह केवल समय मैं इसकी आवश्यकता के बारे में के लिए काम करता है: mouseenter समर्थन का पता लगाने; hasEvent('mouseenter') क्रोम, फ़ायरफ़ॉक्स, आदि में झूठी वापसी करेगा, जैसा कि इसे करना चाहिए।

लेकिन अब मैं ब्राउज़रों कि focusin और focusout घटनाओं का समर्थन नहीं करते "ठीक" करने के लिए कोशिश कर रहा हूँ। According to PPK, यह मूल रूप से सिर्फ फ़ायरफ़ॉक्स है। दुर्भाग्यवश, क्रोम और सफारी को निम्नलिखित कारणों से "अपूर्ण" समर्थन के रूप में सूचीबद्ध किया गया है:

सफारी और क्रोम इन घटनाओं को केवल addEventListener के साथ आग लगाना; पारंपरिक पंजीकरण के साथ नहीं।

सामान्यतः, यह ठीक है; मैं वैसे भी addEventListener का उपयोग कर रहा हूं। यह का मतलब है, हालांकि, elem.onfocusin !== undefined के माध्यम से समर्थन का पता लगाने काम नहीं करेगा। क्रोम में

<p>Do I support <a href="#">focusin</a>?</p> 

<script> 
var elem = document.getElementsByTagName('p')[0]; 

// hasEvent method defined here 
function listener() { 
    var response = hasEvent('focusin') ? 'Yes!' : 'No...'; 
    alert(response); 
} 

elem.addEventListener('focusin', listener, false); 
</script> 

ऊपर अलर्ट No... !!: मैं इसे बाहर का परीक्षण किया है, और यह सच है ब्राउजर स्नीफिंग का उपयोग किये बिना यह पता लगाने का कोई तरीका है कि ब्राउज़र focusin का समर्थन करता है या नहीं?

Answer 1

यह इस तथ्य का उपयोग करता है कि focus()focusin: http://jsfiddle.net/pimvdb/YXeD3/ ट्रिगर करता है।

तत्व दिखाई देना चाहिए और डोम में डाला जाना चाहिए, अन्यथा focusin किसी कारण से निकाल दिया नहीं गया है।

var result = (function() { 
    var hasIt = false; 

    function swap() { 
     hasIt = true; // when fired, set hasIt to true 
    } 

    var a = document.createElement('a'); // create test element 
    a.href = "#"; // to make it focusable 
    a.addEventListener('focusin', swap, false); // bind focusin 

    document.body.appendChild(a); // append 
    a.focus(); // focus 
    document.body.removeChild(a); // remove again 

    return hasIt; // should be true if focusin is fired 
})(); 

Answer 2

से पहले लक्ष्य तत्व ध्यान केंद्रित प्राप्त करता Focusin & focusout लागू किया जाना चाहिए, इस घटना क्रम भी गाड़ी लगता है

http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-event-order

वर्तमान में, केवल IE में काम करता है कल्पना के अनुसार:

Chrome/Safari: 
focus 
focusin 
DOMFocusIn 
blur 
focusout 
DOMFocusOut 
focus 
focusin 
DOMFocusIn 

Opera 12: 
focus 
DOMFocusIn 
focusin 
blur 
DOMFocusOut 
focusout 
focus 
DOMFocusIn 
focusin 

IE 8: 
focusin 
focus 
focusout 
focusin 
blur 
focus 

Firefox 14: 
focus 
blur 
focus 

Answer 3

आप ("onfocusin" in document) के लिए परीक्षण कर सकते हैं।

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

आप सभी ब्राउज़रों (IE9 +, क्रोम, फायरफॉक्स, एज) पर focusin घटना के रूप में समान व्यवहार प्राप्त करने के लिए निम्न कोड का उपयोग हो सकता है:

var eventName, useCapture; 
if ("onfocusin" in document) { 
    eventName = "focusin"; 
    useCapture = false; 
} else {  
    eventName = "focus"; 
    useCapture = true; 
} 

document.body.addEventListener(eventName, function(event) { 
    event.target.style.background = "pink";  
    }, useCapture); 

जे एस बेला यहाँ : https://jsfiddle.net/d306qm92/2/

फ़ायरफ़ॉक्स वैकल्पिक हल के बारे में यहाँ अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/Events/focus#Event_delegation

अद्यतन: जैसा कि ऊपर कहा, परीक्षण को गलत तरीके से होगा क्रोम पर "झूठा" कहें, फिर भी कोड नमूना इरादे के रूप में काम करेगा क्योंकि क्रोम दोनों विधियों (focusin और focususeCapture के साथ) का समर्थन करता है।