事件类型笔记

一、表单事件

1. select 当选择输入框字符时出发

input.onselect = function () {
      console.log(window.getSelection().toString(), '我被触发了');
    }

2. resize 当页面缩放时触发

window.onresize = function(){
      console.log(window.outerWidth,window.outerHeight)

3. 滚动事件 scroll

window.onscroll = function () {
      // console.log(window.pageYOffset,'获取距离上方位置')
      console.log(document.documentElement.scrollTop, '获取距离上方位置')
    }

4. input 监听输入框事件

 input.oninput = function () {
      console.log(event.target.value, '输入框输入的值')
    }

5. focus 聚焦事件

input.onfocus = function () {
      this.style.backgroundColor = 'red'
    }

6. blur 失焦事件

input.onblur = function () {
      // this.style.backgroundColor = 'blue';
    }

二、鼠标事件

div.onmouseenter = function () {
      console.log('鼠标移入');
    }
    div.onmouseleave = function () {
      console.log('鼠标移出');
    }
    div.onmousemove = function () {
      console.log('鼠标一直移动');
    }
    div.onmousedown = function () {
      console.log('鼠标按下');
    }
    div.onmouseup = function () {
      console.log('鼠标抬起')
    }
    div.onmousewheel = function () {
      console.log('鼠标滚轮');
    }
    div.ondblclick = function () {
      console.log('鼠标双击');
    }

三、键盘事件

keydown 键盘按下事件
keyup   键盘抬起事件
keypress 键盘持续按下事件

四、页面跳转

1.assign 页面跳转 并且会在浏览器产生一条历史记录

 btn1.onclick = function(){
      // 页面跳转 并且会在浏览器产生一条历史记录
      location.assign('./4-网易严选滚动.html')
    }

2. replace  页面替换 将页面替换为页面 不会在浏览器产生一条历史记录

 btn2.onclick = function(){
      // 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录
      location.replace('./4-网易严选滚动.html')
    }

3.reload   刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存

btn3.onclick = function(){
      // 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存
      location.reload(true);
    }

4. 前进到下一个历史记录栈
history.forward();
前进一个下一个历史记录页面
history.go(1)