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

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))
    }
 </
上一篇:Android学习记录(9)—Android之Matrix的用法


下一篇:web.xml配置webAppRootKey 的问题