点击输入框进行监听，离开输入框失去焦点进行监听

<!DOCTYPE html>
<html>
<body>
 
<h1>JavaScript addEventListener()监听事件</h1>
 
<p>点击输入框进行监听，离开输入框失去焦点进行监听</p>
<!-- 1、点击输入框进行监听，离开输入框失去焦点进行监听开始 -->
<input id="eventListener1" type="text" value=""></input>
<input id="eventListener2" type="text" value=""></input>
<!-- 1、点击输入框进行监听，离开输入框失去焦点进行监听结束 -->
 
<!-- 1、点击输入框进行监听，离开输入框失去焦点进行监听开始 -->
<script>
  var eventListener1 = document.getElementById("eventListener1");
  var eventListener2 = document.getElementById("eventListener2");
  eventListener1.addEventListener("click", eventListenerMouseoverId1);
  eventListener1.addEventListener("blur", eventListenerMouseoutId2);
  //进入
  function eventListenerMouseoverId1(){
    console.log("123");
    document.getElementById("eventListener1").value = "点击输入框进行监听";
    //document.getElementById("eventListener1").innerHTML = "123"
  }
  //离开
  function eventListenerMouseoutId2(){
    console.log("456");
    var val2 = document.getElementById("eventListener1").value;
    document.getElementById("eventListener2").value = val2;
    //document.getElementById("eventListener2").value = "456";
    //document.getElementById("eventListener1").innerHTML = "456"
  }
</script>
<!-- 1、点击输入框进行监听，离开输入框失去焦点进行监听结束 -->
 
</body>
</html>