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

<!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>

　　

posted @ 2023-05-09 11:51  Amy清风  阅读(271)  评论(0)    收藏  举报