2-2事件

1.焦点事件

获取焦点 onfocus
遗失焦点 onblur

<input id="app" type="text">
    <script>
        var app = document.getElementById("app")
        app.onfocus = function(){
            this.style.backgroundColor="red"
        }
        app.onblur = function(){
            this.style.backgroundColor = "yellow"
       }
</script>

2.鼠标事件

鼠标悬停 onmouseover
鼠标离开 onmouseout

<p id="p">hello world</p>
<script>
  var p = document.getElementById("p")
  p.onmouseover = function(){
    p.style.background = "red"
  }
  p.onmouseout = function(){
    p.style.background = "green"
  }
</script>

3.windows有关

onload整个页面加载完之后再触发
onresize窗口大小改变时触发
onscroll窗口滚动时触发

<p id="p">hello world</p>
window.onload = function(){
  var p = document.getElementById("p")
  p.onclick = function(){
    console.log("hello world");
  }
}
window.onresize = function(){
  console.log("窗口大小改变了");
}
window.onscroll = function(){
  console.log(2);
}

4.键盘

onkeydown 用户按下键盘时触发
onkeypress 用户按下后释放键盘后触发
onkeyup 用户按键松开后发生

event.key获取键
event.keyCode编号
event.value获取键的值

<input type="text" id="input">
var input = document.getElementById("input")
input.onkeydown = function(event){
  console.log(event.key)
  console.log(event.keyCode);
  if(event.keyCode == 85){
    console.log("发大招");
  }
}
input.onkeypress = function(){
  console.log("press");
}
input.onkeyup = function(){
  console.log("up");
}

5.内联事件(获取自定义属性)

<button id="btn" data-aid="123456" onclick="go(event)">
      btn
</button>
/* 内联事件
  定义 data-aid="123456"
  获取自定义属性值 event.target.dataset.aid
*/
function go(event){
console.log("hello world");
console.log(event.target.dataset.aid);
}

6.定时器

setTimeout间隔一定的时间触发，只触发一次
setInterval间隔相同时间重复触发

clearTimeout清除定时**

定时器会有一个id值，记录它在内存中的位置
如果想清除定时器,只需要使用clearInterval()方法,清除这个id值就可以了
clearTimeout()
<button id="btn">停止定时器</button>
    <script>
        var btn = document.getElementById("btn")
        var timer = setInterval(function(){
            console.log(2);
        },1000)
        btn.onclick = function(){
            clearInterval(timer)
        }
  </script>