前端基础 - WebApi （四）键盘事件

键盘事件

常用的三个

1. onkeyup：当某个按键被松开的时候后触发
2. onkeydown：当某个按键被按下的时候触发
3. onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift)

注意：

1. 如果使用addEventListener不需要加on
2. onkeypress和前面的两个事件区别在于它不识别功能键
3. 三个时间的触发顺序是：keydown–keypress–keyup

键盘事件对象

属性

KeyCode：返回该键的ASCII码值

1. keydown和keyup事件对象是同样的，事件不区分字母大小写(大写)，keypress会区别大小写
2. 在实际开发中，使用更多的是keydown和keyup，能够识别所有按键
3. keypress识别大小写返回大小写不同的ASCII码

作用：使用keyCode属性判断用户的按键操作

事件冒泡和默认事件

1. 阻止默认事件：e.preventDefault();
2. 阻止事件冒泡：e.stopPropagation();
3. 两个都阻止： return false;(原生JS里面无法阻止事件冒泡)

案例

1. 模仿京东搜索栏按下S键光标进入

       <input type="text">
       <script>
           // 实现思路
           // 检测用户是否按下了S键，如果按下了将光标定位到搜索框里面
           window.onload=function(){
               // 【1】先获取搜索框
               var search=document.querySelector("input");
               // 【2】给document添加keyup事件
               document.addEventListener("keyup",function(e){
                   // 【3】获取并判断按下的键值是不是S
                   if(e.keyCode===83){
                       // 【4】设置光标到搜索框内部
                       search.focus();
                   }
               })
           }
       </script>
   

2. 快递单查询案例

       <div class="base">
           <div class="content">123</div>
           <input type="text" class="search" placeholder="请输入您的快递单号">
       </div>
   
       <script>
           // 快递单号输入内容时，上面的大号盒子显示
           // 表单检测用户的输入操作，给表单添加键盘事件
           // 当用户输入单号时，将表单里面的value值同时赋给content盒子，innerText
           window.onload=function(){
               var div=document.querySelector(".content");
               var txt=document.querySelector(".search");
               txt.addEventListener("keyup",function(){
                   if(txt.value==""){
                       div.style.display="none";
                   }else{
                       div.style.display="block";
                       div.innerText=this.value;
                   }
               });
               txt.addEventListener("blur",function(){
                   div.style.display="none";
               });
   
               txt.addEventListener("focus",function(){
                   if(txt.value!=""){
                       div.style.display="block";
                   }
               })
           }
       </script>
   

BOM模块

什么是BOM

浏览器对象模型，提供了一些独立于内容页面与浏览器窗口进行交互的对象接口，它的核心是window对象

BOM也是由一系列相关的对象组成，并且每个独享都提供了很多方法和属性

但是BOM缺少标准化，JS的语法的标准化是ECMA组织提出的，DOM的标准化组织W3C，BOM最初始Netscape浏览器标准的一部分。

DOM和BOM

DOM

1. 文档对象模型
2. DOM将文档当做一个对象来处理
3. DOM的顶级对象是document
4. 主要学习的是对页面元素的操作
5. DOM是W3C标准规范

BOM

1. 浏览器对象模型
2. 将浏览器当做一个对象来处理
3. BOM的顶级对象是window
4. 学习的是浏览器窗口交互的一些对象
5. 是浏览器厂家在格子浏览器上定义的规范

BOM的构成

BOM是比DOM更大的盒子对象

window对象：document、location、navigation、screen、history

顶级对象window

window对象是浏览器的顶级对象，具有双重角色

1. JS访问浏览器窗口的一个接口
2. 是一个全局对象，声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法

注意：理解为全局的变量和方法函数在调用的时候其实是省略了window.操作

Window对象的常见事件

窗口加载事件

window.οnlοad=function(){}

window.addEventListener(“load”,function(){});

onload事件是页面的加载事件，当文档内容(包含图像、脚本文件、css文件等)全部加载完成会触发的事件

文档加载事件

window.addEventListener("DOMContentLoaded",function(){
            console.log(document.querySelector("h1"));
        })

DOMContentLoaded也是一个加载事件，文档加载事件，只需要考虑DOM元素(不包含图片、css、flash等)加载完成，IE9以上

窗口大小改变事件

window.οnresize=function(){}

如果调整窗口大小则时间被触发，这个事件经常被用作处理响应式布局

定时器事件(两种)

setTimeout();

serInterval();

setTimeout()定时炸弹

使用时指定一个时间段，只要时间到了直接执行绑定函数

window.setTimeout(function(){
            alert("hello");
        },3000)

第一个参数：事件所执行的函数；

第二个参数：时间间隔以毫秒为单位

注意：

1. 绑定函数，回调函数callback，这个函数可以直接写在方法参数所在位置，还可以采取字符串"函数名()"，还可以直接写函数名，三种调用方式，不推荐使用字符串方式
2. 延迟的毫秒数可以省略，默认为0，如果写必须是毫秒
3. 如果定时器比较多的话，可以给每个定时器一个标识符

停止定时器

window.clearTimeout(second);

方法取消了先前通过调用setTimeout建立的定时器，参数就是要停止的定时器的标识符

serInterval()闹钟定时器

使用时指定一个时间段，然后每隔这个时间段都会调用一次回调函数

        var i=0;
        window.setInterval(function(){
            console.log(i);
            i++;
        },1000);

哪怕是第一次执行回调函数也是在时间到了之后执行的

停止定时器

window.clearInterval(id)

location对象

location对象介绍

window对象给我们提供了一个location属性，这个对象主要用于获取或设置窗体的url地址，并且可以用于解析url。

URL

同一资源定位符(Uniform Resource Location)是互联网上的标准资源地址，网络所有的数据都以文件形式保存，每个文件在网络世界中都有一个唯一的URL，它包含的信息指出文件的所在位置及浏览器的处理方式

url语法：

protocol://host[:port]/path/…

http://www.yltedu.com/…

protocol:协议类型，通信协议http、ftp、mailto等

host:主机名称(域名)

port：端口号可选，如果省略使用的是默认的端口，http默认的端口号是 80

path：路径由0个或多个"/"+文件地址等组成，表示主机上的文件地址目录

属性

1. href：获取或设置一个url
2. host：返回主机(域名)
3. port：返回端口号，如果未写返回空字符串
4. pathname：返回路径
5. search：返回参数，URL参数是指URL地址中网址之后的?以后
6. hash：返回片段，URL中#后面的内容

方法

1. assign()：和href一样，可以跳转页面，重定向跳转
2. replace()：替换当前页面，不记录入历史中，所以不能后退页面
3. reload()：重新载入页面，相当于刷新按钮，如果参数为true相当于强制刷新

navigation对象

navigation对象主要是记录有关浏览器的信息，常用的属性userAgent，这个属性可以返回由客户端发送至服务器的user-agent头部的值

history对象

window对象为提供的一个history对象来进行与浏览器的历史记录进行交互，

常见用法

1. back()：实现浏览器后退功能
2. forward()：实现浏览器的前进功能
3. go(参数)：前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面