JavaScript【元素获取-定时器-事件】

元素获取
document.querySelector
获取满足条件的第一个元素
获取到的元素是dom元素，可以直接调用dom的api
如果没有获取到，返回null
document.querySelectorAll
获取满足条件的所有元素，返回一个伪数组
伪数组中成员都是dom元素
伪数组不能直接操作，必须遍历获取到里面的dom元素来进行操作
定时器
作用：每隔一段时间重复做一个事情
语法： setInterval(执行的函数，间隔毫秒值)
setInterval会返回一个句柄(标识id)
clearInterval可以清除定时器，传递的参数是句柄
事件
事件：用户操作所触发的行为
为用户操作添加一个事件监听，当用户真正进行某个操作的时候，就会触发某个行为
语法：dom.addEventListener(事件类型，处理函数)
常见事件类型
click:单击事件
mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发
mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发
input:文本输入框内容变化所触发的事件，只要内容变化就会触发
fcous:文本框聚焦事件，文本框获取焦点，焦点就是光标点
change:文本框失焦事件，前提是内容改变了
blur:文本框的失焦事件，只要失焦就会触发，不关注内容是否变化
keydown:键按下时自动触发
keyup:键松开时自动触发
change:对于表单元素file而言，它 是用户选择好文件之后触发

<script>
    let username = document.querySelector('.username')
    let password = document.querySelector('.password')

    // 添加输入框的获得焦点事件--聚焦事件
    username.addEventListener('focus', function () {
      username.style.outline = 'none'
      username.style.border = '1px solid red'
    })
    // // 为输入框添加失焦事件：失去光标
    username.addEventListener('blur', function () {
      username.style.border = '1px solid #000'
    })

    // 对于键盘按键事件，先得让输入框聚焦
    username.addEventListener('keydown', function () {
      console.log('我按下一个键')
    })
    username.addEventListener('keyup', function () {
      console.log('我松开了')
    })

    password.addEventListener('keydown', function (e) {
      // 如果你按下的是  确认  键，我应该实现登陆业务
      if (e.which == 13) {
        console.log('我要去登陆了')
      }
    })
      input.addEventListener('change', function () {
      console.log('我要开始上传文件了哦')
    })
    
    input.addEventListener('input', function () {
      // console.log(input.value)
      // console.log(input.value.length)
      span.innerHTML = `${input.value}`
    })
  </script>