当元素失去焦点时实现JavaScript

给定一个文档，任务是在元素失去焦点时实现功能。我们有两个选项，一个是 onblur事件 ，另一个是 onfocusout事件 的JavaScript。我们将讨论一些方法。首先是前几种方法的理解。

使用onblur事件

JavaScript onblur事件： 当元素即将失去焦点时会发生这个事件。

在HTML中：

<element onfocusout="script">

在JavaScript中：

object.onfocusout = function(){script};

在JavaScript中，使用addEventListener()方法：

object.addEventListener("blur", script);

示例1： 此示例将 onblur事件 添加到元素，并在事件发生时运行指定的代码。

<h1 style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"> 
</p> 
<input type="text" name="input" value="inputElement" onblur="gfg_Run();" /> 
<p id="GFG_DOWN"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var today = 'First click inside of input'+ 
    ' and then outside to perform event!'; 
    el_up.innerHTML = today; 
      
    function gfg_Run() { 
        el_down.innerHTML = "Input element lost focus"; 
    } 
</script>

输出结果：

当元素失去焦点时实现JavaScript

通过使用onfocusout事件的方法

JavaScript的onfocusout事件 ：此方法将一个节点附加为另一个节点的最后一个子节点。

语法：

在HTML中：

<element onfocusout="script">

在JavaScript中：

object.onfocusout = function(){script};

在JavaScript中，使用addEventListener()方法：

object.addEventListener("focusout", script);

示例2： 该示例为 input 元素添加了一个 onfocusout事件 ，当事件发生时，指定的代码将运行。

<h1 style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"> 
</p> 
<input type="text" name="input" value="inputElement" onfocusout="gfg_Run();" /> 
<p id="GFG_DOWN"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var today = 'First click inside of input'+ 
        ' and then outside to perform event!'; 
    el_up.innerHTML = today; 
      
    function gfg_Run() { 
        el_down.innerHTML = "Input element lost focus"; 
    } 
</script>

输出：

当元素失去焦点时实现JavaScript