<ul>
   <li class="form-li">
       <div class="border-color">
           <div class="form-icon phone-gray"></div>
           <input class="text" type="text" placeholder="请输入您的手机号码"  name="phone" id="userPhone"/>
           <div class="form-icon-last"><div class="clean"></div></div>
           <div class="clear"></div>
       </div>
       <div class="form-item"></div>
   </li>

<li class="form-li">
   <div class="border-color">
       <div class="form-icon code-gray"></div>
       <input class="text" type="text" id="code_input" placeholder="请输入右侧验证码" name="verCode"/>
       <div class="form-icon-verificationPic">
           <div id="v_container" style="width: 95px;height: 35px;"></div>
       </div>
       <div class="clear"></div>
   </div>
   <div class="form-item"></div>
</li>

</ul>

<script>

/****************输入框获得焦点效果************************/
var phoneNumber = document.getElementsByClassName("text")[0];
var imgCode = document.getElementsByClassName("text")[1];
let ul = document.getElementsByTagName("ul")[0];
//编写event通用方法
var eventFun = function(event){
   console.log(event.target);
   console.log("我是捕手");
   if(event.type == "focus"){
       var icon = event.target.parentElement.getElementsByClassName("form-icon")[0];
       var div = event.target.parentElement;
       let hou = icon.className.lastIndexOf("-gray");
       if(hou == -1){
           hou = icon.className.lastIndexOf("-blue");
       }
       let str = icon.className.slice(10,hou);
       div.style.border = "1px solid #4a95ff";
       icon.className = "form-icon "+str+"-blue";
   }
};
//给dom元素绑定监听
console.log(ul);
ul.addEventListener("focus",eventFun);
phoneNumber.addEventListener("focus",eventFun);

</script>