040-Web前端-JS-焦点事件

文档事件——焦点事件
#6.22

---

焦点：
		js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。
描述：
		焦点事件分为获取焦点和失去焦点事件，分别会在元素节点获得焦点和失去焦点时自动触发。
语法：
        获取焦点：节点.onfocus=function(){}
        失去焦点：节点.onblur=function(){}
注意：
        a.可以使用DOM0绑定也可以使用DOM2绑定
        b.不支持事件冒泡

    document.querySelector('input').onfocus=function(){console.log('获取焦点')}
    
    document.querySelector('input').onblur=function(){console.log('失去焦点')}
    

样例：焦点框内输入合法时变绿不合法变红

  var input=  document.querySelector('input');
  input.onblur=function(){
      var pass=input.value;
      if(pass.length>6){//合法
        input.setAttribute('class','greenborder');
      }else{
          input.setAttribute('class','redborder');
      }
  }