Web API 第4（键盘事件和BOM）

最新推荐文章于 2021-10-15 23:52:54 发布

hvbv

最新推荐文章于 2021-10-15 23:52:54 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/qq_38830147/article/details/105540704

版权

键盘事件

（1）方式
1，onkeyup：按键弹起时触发
2，onkeydown：按键按下时触发
3，onkeypress：按键按下时触发，无法识别功能键如：ctrl 、shift等
4，执行顺序：keydown---->keypress---->keyup
（2）属性
1，keyCode：可以得到相应键的ASCII值
2，keyup和keydown事件不区分字母大小写，a和A的ASCII值都是65；（可识别所有键）
3，keypress事件区分字母大小写，a得到97，A得到65；（不可识别功能键）
4，可以利用keyCode返回的ASCII值判断用户按下的键
例子：点击特定按键获得焦点

<body>
    <input type="text">
    <script>
        var input = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                input.focus();
            }
        })
    </script>
</body>

BOM

（1）概述
1，浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象为window；
2，BOM由一系列相关的对象构成，每个对象都提供了很多方法和属性；
3，BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分；兼容性较差
（2）构成
1，window对象是浏览器的顶级对象，它具有双重角色；
2，window对象是js访问浏览器窗口的一个接口，是一个全局对象；
3，定义在全局作用域中的变量和函数都会变成window对象的属性和方法；
4，alert（）、prompt（）都属于window对象方法，在调用时可以省略window；
5，window下有一个特殊属性：window.name；
（3）window窗口加载事件
1，窗口加载事件：window.onload当文档内容完全加载完成后触发该事件（包括dom元素，图片，flash，css等），可以将js代码写在页面元素上方（传统注册事件方式只能写一次，会以最后一个为准）；建议使用：window.addEventListener(' load ' , function(){})
2，IE9支持的窗口加载事件：document.addEventListener(' DOMCententLoaded ' ，function(){})当DOM加载完毕就可以触发，不包括图片，flash，css等，加载速度比load更快；
（4）调整窗口大小事件
1，window.addEventListener(' resize ' ，function（）{})：只要窗口大小发生像素变化，就会触发；
2，常利用该事件完成响应式布局，window.innerWidth 当前屏幕的宽度；
（5）定时器
1，方式：setTimeout（）、 setInterval（）
2，window.setTimeout(调用函数，[ 延迟的毫秒数 ])；用与设置一个定时器，在定时器到期之后执行调用函数，只调用一次；
2.1，window可以省略；
2.2，调用函数可以直接写函数（function（）{}）、或者写函数名（fn）；
2.3，延迟的毫秒数可以省略，默认是0，单位是毫秒；
2.4，定时器可能有很多，给定时器赋值一个标识符（var time1=）
2.5，setTimeout（）的调用函数又叫做回调函数callback；普通函数按照代码顺序直接调用，这个函数需要等待时间，到了时间才调用，因此成为回调函数；点击事件(click)中的函数也称为回调函数；
2.6，停止定时器：clearTimeout（定时器名字）
例子：消失和停止消失

<body>
    <button>点击停止消失</button>
    <input type="text">
    <script>
        var btn = document.querySelector('button');
        var ipt = document.querySelector('input');
        var time1 = setTimeout(function() {
            ipt.style.display = 'none';
        }, 3000)
        btn.addEventListener('click', function() {
            clearTimeout(time1);
        })
    </script>
</body>

3，window.setInterval(回调函数，[ 间隔的毫秒数 ]) ；重复调用一个函数，每隔一段时间，就调用一次回调函数；
3.1，特点和setTimeout差不多；
3.2，clearInterval ：注意全局变量和局部变量的调用在函数外给一个var time1=null；
例子：倒计时

<body>
    <div>
        <span class='hour'>1</span>
        <span class='minute'>2</span>
        <span class='second'>3</span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2020-4-16 14:00:00'); //返回用户输入时间总的毫秒数
        countDown();
        //开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); //返回当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
            var h = parseInt(times / 60 / 60 % 24); //计算当前小时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60); //计算当前分钟
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); //计算当前秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

例子：获取手机验证码

<body>
    请输入验证码：<input type="number"><button>获取验证码</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3; //定义间隔的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var time1 = setInterval(function() {
                if (time === 0) {
                    //清除定时器并复原按钮
                    clearInterval(time1);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)
        })
    </script>
</body>

（6）this的指向问题
1，this的最终指向是那个调用它的对象；
2，全局作用域或者普通函数中this指向全局对象window（定时器中的this指向window）
（7）js执行机制
1，js语言的特点就是单线程，同一时间只能做一件事；
2，为了解决这个问题，允许js脚本创建多个线程；于是js出现了同步和异步
2.1，同步：前一个任务结束后执行后一个任务，程序的执行顺序和任务的排列顺序一样；
2.2，异步：在前一个任务还未执行完，允许先执行下一个任务
2.3，本质区别：这条流水线上各个流程的执行顺序不同；
2.4，同步任务：同步任务都在主线程上执行，形成一个执行栈；
2.5，异步任务：js的异步是通过回调函数实现的；异步任务相关回调函数添加到任务队列中
2.6，异步任务有三种类型
2.6.1，普通事件：click，resize等
2.6.2，资源加载：load，error等
2.6.3，定时器：setTimeout，setInterval等
2.7，执行机制：先执行同步栈中的同步任务----异步任务（回调函数）放入任务队列中----当同步任务全部执行完毕，按次序读取任务队列中的异步任务；由于主线程不断的重复获得任务，执行任务，在获取任务，在执行，所以这种机制被称为事件循环（event loop）
（8）location对象
1，URL：统一资源定位符，是互联网上标准资源地址
1.1，语法格式：protocol：//host[ :port ]/path/[?query]#fragment
1.2，说明：http://www.itcast.cn/index.html?name=andy&age=18#link
protocol：通信协议，常用的有http，ftp，maito等
host：主机（域名），www.baidu.com
port：端口号：可选，省略时使用方案的默认端口，如http的默认端口是80
path：路径：有零个或多个’/'符号隔开的字符串，一般用来表示主机上一个目录或文件地址
query：参数：可选，以键值对的形式通过&符号分割开来
fragment：片段：#后面的内容，常用于链接锚点
2，location对象属性
location.href：获取或者设置整个URL
location.host：返回域名
location.port：返回端口号，没写则返回空字符串
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段，#后面内容，常用于链接锚点
例子：点击或等待几秒后跳转到其他页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            location.href = 'http://www.baidu.com';
        })
        var time1 = 3;
        setInterval(function() {
            if (time1 == 0) {
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '您将在' + time1 + '秒后到达百度';
                time1--;
            }
        }, 1000)
    </script>
</body>

3，location对象方法
3.1，location.assign()：跟href一样，可以跳转页面，记录历史，可以后退页面；
3.2，location.replace()：替换当前页面，不记录历史，不能后退页面；
3.3，location.reload()：重新加载页面，相当于刷新按钮参数为true则是强制刷新ctrl+f5；
（9） navigator对象
1，包含有关浏览器的信息，有很多属性；最常用的是userAgent，改属性可以返回由客户机发送服务器的user-agent头部的值；
（10）history对象
1，与浏览器历史记录进行交互，该对象包含用户访问过得URL
2，back（）：后退功能
3，forword（）：前进功能
4，go（参数）：前进后退功能，参数为1，前进一个页面；参数为-1，后退一个页面；
5，history对象比较少用，但是会在一些OA办公系统中见到

hvbv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API 第4（键盘事件和BOM）

键盘事件（1）方式1，onkeyup：按键弹起时触发2，onkeydown：按键按下时触发3，onkeypress：按键按下时触发，无法识别功能键如：ctrl 、shift等4，执行顺序：keydown---->keypress---->keyup（2）属性1，keyCode：可以得到相应键的ASCII值2，keyup和keydown事件不区分字母大小写，a和A的ASC...
复制链接

扫一扫