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