ऑनब्लर इवेंट
विभाषण और उपयोग
ऑनब्लर इवेंट वस्तु को फोकस खोने पर होता है।
ऑनब्लर इवेंट सबसे अधिक फॉर्म वेरिफ़िकेशन कोड के साथ उपयोग किया जाता है (उदाहरण के लिए，जब उपयोगकर्ता फॉर्म फील्ड से बाहर जाता है तो)।
टिप्पणी: ऑनब्लर इवेंट इसके साथ onfocus इवेंटविपरीत
टिप्पणी: ऑनब्लर इवेंट इसी प्रकार का है onfocusout इवेंट।मुख्य अंतर यह है कि ऑनब्लर इवेंट बुबलिंग नहीं करता है। इसलिए अगर आप एलीमेंट या उसके उपसंभावित एलीमेंट को फोकस खोने का पता लगाना चाहते हैं तो आपको onfocusout इवेंट का उपयोग कर सकते हैं। लेकिन आप ऑनब्लर इवेंट के addEventListener() विधिका useCapture पैरामीटर (वैकल्पिक) इसे करने के लिए उपयोग करें।
उदाहरण
जब उपयोगकर्ता इनपुट फील्ड से बाहर जाता है तो जेवास्क्रिप्ट चलाया जाता है:
<input type="text" onblur="myFunction()">
पृष्ठ के नीचे अधिक TIY उदाहरण हैं。
व्याकरण
एचटीएमएल में:
<एलीमेंट ऑनब्लर="myScript">
जेवास्क्रिप्ट में:
ऑब्जेक्ट.ऑनब्लर = function(){}myScript};
जेस्क्रिप्ट में, addEventListener() विधि का उपयोग करके:
ऑब्जेक्ट.addEventListener("blur", myScript);
टिप्पणी:Internet Explorer 8 या अधिक पुरानी संस्करण इसका समर्थन नहीं करते addEventListener() विधि.
तकनीकी विवरण
| बुबलिंग | नहीं समर्थित |
|---|---|
| रद्द करने योग्य | नहीं समर्थित |
| इवेंट त्रिवर्ग | FocusEvent |
| समर्थित HTML टैग: | सभी HTML एलीमेंट, बस्पेक्ट: <base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> और <title> को छोड़कर: |
| DOM संस्करण: | स्तर 2 इवेंट |
ब्राउज़र समर्थन
| इवेंट | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onblur | समर्थन | समर्थन | समर्थन | समर्थन | समर्थन |
और अधिक उदाहरण
उदाहरण
"onblur" और "onfocus" इवेंट को साथ में उपयोग करें:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
उदाहरण
इवेंट डेलीगेशन: addEventListener() के useCapture पारामीटर को true रखें:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
उदाहरण
इवेंट डेलीगेशन: focusin इवेंट का उपयोग करना (Firefox समर्थन नहीं करता):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
