Web前端（七）-window对象常见属性、事件相关、DOM文档对象模型、jQuery框架、前端MVC设计模型、MVVM设计模式、VUE框架

XiaoCui-blog 2021-08-05 原文

window对象中常见的属性

location:位置
- location.href 获取或修改浏览器的请求地址
- location.reload() 重新加载/刷新
- location.search 获取地址栏中从?开始的所有参数信息
history:历史指当前窗口的访问历史
- history.length 历史页面数量
- history.forward() 前往下一页面
- history.back() 返回上一页面

事件相关

事件: 系统给提供的一些特定时间点,包括鼠标事件,键盘事件,状态改变事件.
鼠标事件
- onclick: 点击事件
- onmouseover: 鼠标移入事件
- onmouseout: 鼠标移出事件
- onmousedown: 鼠标按下事件
- onmouseup: 鼠标抬起事件
- onmousemove: 鼠标移动事件
键盘事件:
- onkeydown:键盘按下
- onkeyup: 键盘抬起
- 获取按键编码: event.keyCode
- 将按键编码转成对应的字符: String.fromCharCode(编码)
状态改变事件:
- onblur: 失去焦点事件
- onchange: 值改变事件

测试代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
     </style>
 </head>
 <body>
 <div onmouseover="overfn()" onmouseout="outfn()" onmousedown="downfn()" onmouseup="upfn()"
     onmousemove="movefn()"></div>
 
 <input type="text" onkeydown="kdfn()" onkeyup="kufn()" onblur="blurfn()">
 
 <select id="s1" onchange="changefn()">
 <!--    <option value=""></option>注意value内容就是""里面的内容替代-->
     <option>上海</option>
     <option>北京</option>
     <option>广州</option>
     <option>深圳</option>
 </select>
 
 <h1></h1>
 
 <script>
     function changefn() {
         //得到两个元素对象
         let s = document.querySelector("#s1");
         let h = document.querySelector("h1");
         //将下拉选的值给到h1
         h.innerText = s.value;
     }
     /*onblur:失去焦点事件*/
     function blurfn() {
         alert("已完成");
     }
     function overfn() {
         console.log("鼠标移入");
     }
     function outfn() {
         console.log("鼠标移出");
     }
     function downfn() {
         console.log("鼠标按下");
     }
     function upfn() {
         console.log("鼠标抬起");
     }
     function movefn() {
         console.log("鼠标移动");
     }
     function kdfn() {
         //得到按键编码
         console.log("键盘按下:"+event.keyCode);
     }
     function kufn() {
         //将按键编码转成字符
         console.log("按键抬起:"+String.fromCharCode(event.keyCode))
     }
 </