<!DOCTYPE html>
<html>
<head>
<title>表单事件</title>
<style type="text/css">
   input{
    /*去掉输入框 默认蓝色边框*/
    outline: none;
    /*border-color: transparent;*/
   }
</style>
</head>
<body>
<div>
<input type="text" name="">
</div>
</body>
<script type="text/javascript">
  var inp=document.getElementsByTagName('input')[0];
  //表单事件
  //表单元素失去焦点是触发
  inp.οnblur=function(){
  //alert('失去焦点');
  }
  //表单获取焦点时
  inp.οnfοcus=function(){
  // alert('获取焦点');
  inp.style.borderColor="red";
  inp.style.borderColor="yellow";
  }
  //表单内容发生改变 并失去焦点时触发
  inp.οnchange=function(){
  //表单里面
  inp.style.backgroundColor='pink';
  }
  //表单内容改变时 实时触发
  inp.οninput=function(){
  inp.style.backgroundColor='yellow';
  console.log('表单内容已改变');
  }


</script>
</html>