当元素失去焦点时,将发生HTML DOM onfocusout事件。 onfocusout与onblur相同,唯一的区别是onblur事件不会冒泡。
如果要确定某个元素或其子元素是否失去焦点,则应使用onfocusout事件。
onfocusin事件与onfocusout事件相反。
注意:Firefox不支持onfocusout事件,但是在捕获侦听器的帮助下,您可以确定元素的子代是否失去焦点。
用法:
在HTML中:
<element onfocusout="myScript">
在JavaScript中(可能无法在Chrome,Safari和Opera 15+中正常运行):
object.onfocusout = function(){myScript};
在JavaScript中,使用addEventListener()方法:
object.addEventListener("focusout", myScript);
例:使用HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM onfocusout event </h2> Email:
<input type="email" id="email" onfocusout="gfgFun()">
<script>
function gfgFun() {
var x = document.getElementById("email");
alert("Focus out");
}
</script>
</center>
</body>
</html>
输出:
例:使用JavaScript
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM onfocusout event </h2> Email:
<input type="email" id="email">
<script>
document.getElementById(
"email").onfocusout = function() {
gfgFun()
};
function gfgFun() {
alert("Focus out");
}
</script>
</center>
</body>
</html>
输出:
例:使用addEventListener()方法:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM onfocusout event </h2>
Email:<input type="email" id="email">
<script>
document.getElementById(
"email").addEventListener("focusout", gfgFun);
function gfgFun() {
alert("Input field lost focus.");
}
</script>
</center>
</body>
</html>
输出:
支持的浏览器:下面列出了HTML DOM onfocusout事件支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox 52.0
- 苹果Safari
- Opera
相关用法
- HTML onbeforeprint事件用法及代码示例
- HTML onseeking事件用法及代码示例
- HTML oncanplay事件用法及代码示例
- HTML onblur事件用法及代码示例
- HTML onbeforeunload事件用法及代码示例
- HTML onerror事件用法及代码示例
- HTML fullscreenchange事件用法及代码示例
- HTML onfocusin事件用法及代码示例
- HTML oncopy事件用法及代码示例
- HTML onresize事件用法及代码示例
- HTML onreset事件用法及代码示例
- HTML onscroll事件用法及代码示例
- HTML onratechange事件用法及代码示例
- HTML onclick事件用法及代码示例
- HTML onseeked事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM onfocusout Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。