webAPI中的键盘事件以及线程

标签：webAPI function console log 键盘 window 线程 var document

一、常用键盘事件

1.键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键松开时触发
onkeydown	某个键盘按键按下时触发
onkeypress	某个键盘按键按下时触发，但是不识别功能键，比如ctrl、shift和箭头等

注意：

如果使用document.addEventListener,则不用带on
onkeypress和前面2个的区别的是，它不识别功能键
执行顺序：keydown>keypress>keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01常用键盘事件</title>
</head>
<body>
    <script>
        //1.keyup：按键弹起来的时候触发
         document.onkeyup = function(){
             console.log('我弹起来了');
         }
        document.addEventListener('keyup',function(){
            console.log('弹起来了');
        });

        //2.keypress按键按下的时候触发，不识别功能键，比如；ctrl、shift，左右箭头等等
        document.addEventListener('keypress',function(){
            console.log('按下了press');
        })

        //3.keydown 按键按下的时候触发，能识别功能键比如：  ctrl、shift、左右箭头等等
        document.addEventListener('keydown',function(){
            console.log('我按下了down');
        });

    </script>
</body>
</html>

2.键盘事件对象

键盘事对象	说明
keyCode	返回该键的ASCⅡ值

注意：

实际开发中常用的是keydown和keyup，他们能识别所有的按键，返回对应的ASCⅡ值
keypress不能识别功能键，返回不同的ASCⅡ值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02keyCode</title>
</head>
<body>
    <script>
        //键盘事件对象中的keyCode属性可以得到相应键的ASCⅡ值
        document.addEventListener('keyup',function(e){
            console.log(e.keyCode);
            //我们可以利用keyCode返回的ASCⅡ码值来判断用户按下了哪个键
            if(e.keyCode === 65){
                alert('您按下了a键盘');
            } else {
                alert('您没有按下a键盘');
            }
        });


        document.addEventListener('keypress',function(e){
            console.log('press:' + e.keyCode);
        });
    </script>
</body>
</html>

3.案例一

按键输入s聚焦到搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="search">
    <script>
        let search = document.getElementById('search')
        document.addEventListener('keyup',function(e){
            console.log(e.keyCode);
            if(e.keyCode == 83){
                search.focus()
            }
        })
    </script>
    
</body>
</html>

4.案例二

仿京东快递单号搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04仿京东快递搜索</title>
    <style>
        *{margin: 0; padding: 0;}
        #search{
            position: relative;
            width: 178px;
            height: 100px;
        }
        .con {
            display: none;
            position: absolute;
            top: 40px;
            border: 1px solid rgba(0,0,0,0.2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
            
        }
        .con::before{
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>
<body>
    <div id="serach">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" id="jd">
    </div>
    <script>
        //快递单号输入的时候，下面大号字体盒子con，显示字号更大
        //表单检测用户输入：给表单添加键盘事件

        var con = document.querySelector('.con');
        var jd_input = document.getElementById('jd');
        jd_input.addEventListener('keyup',function(){
            //console.log('输入内容了');
            if(this.value == ''){
                con.style.display = 'none'
            } else {
                con.style.display = 'block'
                con.innerText = this.value
            }
        });

        //我们失去焦点的时候，就隐藏con盒子
        jd_input.addEventListener('blur',function(){
            con.style.display = 'none'
        });

        //当我们获取焦点的时候，就显示con盒子
        jd_input.addEventListener('focus',function(){
            if(this.value != ''){
                con.style.display = 'block'
            }
        });
    </script>
</body>
</html>

二、BOM

javaScript = ECMAScript + DOM + BOM

1.BOM概述

在 JavaScript 中，BOM（Browser Object Model，浏览器对象模型）提供了与浏览器进行交互的方法和接口。

BOM 使得 JavaScript 能够与浏览器进行交互，实现诸如页面跳转、获取浏览器信息、操作浏览器历史记录等功能。但需要注意的是，BOM 缺乏标准规范，不同浏览器的实现可能会有所不同。

2. 顶级对象window

window 对象：代表浏览器的一个窗口，是 BOM 的核心对象。它包含了其他与浏览器相关的对象和属性，比如文档（document）对象、定时器函数（setTimeout、setInterval）、弹出框方法（alert、confirm、prompt）等。

在调用的时候window是可以省略不写，比如：window.alert(); window.prompt()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //window.document.getElementById('id');
        var num = 10;
        console.log(num);
        console.log(window.num);

        function fn(){
            console.log(111);
        }
        fn();

        window.fn();
        //window.alert('111');
        console.dir(window);

        var name = 'jack'
        console.log(window.name);
    </script>
</body>
</html>

3.window中常见的事件

3.1onload

窗口加载事件，当文档内容完全加载完成后会触发事件

window.onload = function(){
    //...
}

或者

window.addEventListener('load',function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //在文档内容完全加载完成后，再执行js中的事件
        window.onload = function(){
            var div = document.getElementById('div');
            div.style.backgroundColor = 'pink'
            div.style.color = '#fff'
        }
        

        window.addEventListener('load',function(){
            var div = document.getElementById('div');
            div.style.backgroundColor = 'red'
        });
    </script>
</head>
<body>
    <div id="div">哈哈</div>
    
</body>
</html>

3.2resize

窗口大小事件

window.onresize = function(){}
或者
window.addEventListner('resize',function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07窗口大小调整</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我');
            });

            var div = document.querySelector('div');
            window.addEventListener('resize',function(){
                console.log(window.innerWidth);
                console.log(window.innerHeight);
                if(window.innerWidth <= 600){
                    div.style.display = 'none'
                } else {
                    div.style.display = 'block'
                }
            });

        });
        //DOMContentLoaded：是DOM加载完毕，但是不包含图片，falsh、css等就可以开始执行了
        // document.addEventListener('DOMContentLoaded',function(){
        //     alert(3333);
        // })
    </script>
</head>
<body>
    <button>点击</button>
    <div></div>
</body>
</html>

3.3setTimeout

在指定的毫秒数后执行一次给定的函数或代码片段。它接受两个参数：第一个参数是要执行的函数或者一段代码字符串；第二个参数是延迟的毫秒数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function callback(){
            console.log('爆炸了');
        }
        //语法规范是：window.setTimeout(调用函数，延迟时间)
        //1)window是可以省略的
        //2)这个调用函数可以直接写函数，或者写函数名或者是采用字符串  '函数名()'   三种方式
        //3)延迟毫秒可以省略不写，默认是0，如果写，必须是毫秒数
        //4)因为定时器可以有很多，所以我们经常给定时器赋值一个标识符
        var timer1 = setTimeout(callback,3000);
        var timer2 = setTimeout('callback()',4000); //我们不推荐使用这个写法
        var timer3 = setTimeout(function(){
            console.log('把炸了。。。')
        },5000);
    </script>
</body>
</html>

案例

五秒关闭广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/ad.jpg" alt="" id="ad">
    <script>
        //获取对象
        var ad = document.getElementById('ad');
        setTimeout(function(){
            ad.style.display = 'none'
        },5000);
    </script>
</body>
</html>

3.4setInterval

按照指定的时间间隔重复执行给定的函数或代码片段。接受两个参数，第一个参数是要执行的函数或代码字符串，第二个参数是时间间隔的毫秒数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //每隔这个延迟时间，就会调用这个回调函数，会调用很多次
        setInterval(function(){
            console.log('继续输出');
        },1000)
    </script>
</body>
</html>

案例

倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            margin: 200px auto;
        }
        span{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
    <script>
        window.onload = function(){
            //1.获取元素
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            var inputTime = new Date('2024-10-19 11:00:00');
            //调用函数
            countDown();
            //开启定时器
            setInterval(countDown,1000);
            //2.获取时间
            function countDown(){
                var now = new Date();
                var times = (inputTime - now) / 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>
</head>
<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">1</span>
        <span class="second">1</span>
    </div>
</body>
</html>

案例

短信倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //1.获取对象
            var btn = document.getElementById('btn');
            var i = 5;
            //2.注册事件
            btn.addEventListener('click',function(){
                btn.disabled = true; //将按钮设置为不可用
                var timer = window.setInterval(function(){
                    //判断时间
                    if(i == 0){ //不要继续往后减少了
                        //先清除定时器
                        clearInterval(timer);
                        //将按钮设置为可用
                        btn.disabled = false;
                        //按钮的名字重新变为”发送“
                        btn.innerHTML = '发送'
                        i = 5; //时间重新开始
                    } else {
                        btn.innerHTML = '还剩下' + i + '秒'
                        //将i减少
                        i--
                    }
                    
                },1000);
                
            });


        }
    </script>
</head>
<body>
    手机号码： <input type="text"> <button id="btn">发送</button>
</body>
</html>

3.5定时器的停止

window.clearTimeout(timeoutId);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击停止定时器</button>
    <script>
        var btn = document.getElementById('btn');
        var timer = setTimeout(function(){
            alert('ok');
        },5000);

        //停止任务
        btn.onclick = function(){
            clearTimeout(timer);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="begin">开始计时</button>
    <button id="end">停止计时</button>
    <script>
        var begin = document.getElementById('begin');
        var end = document.getElementById('end');

        var timer = null; //设置timer是一个全局变量，null表示它是一个空对象
        begin.addEventListener('click',function(){
            timer = setInterval(function(){
                console.log('how are you');
            },1000);
        });

        end.addEventListener('click',function(){
            clearInterval(timer);
        })
    </script>
</body>
</html>

4.location

location 对象：用于获取或设置当前窗口的 URL 地址信息，包括 href（完整 URL）、protocol（协议）、host（主机名和端口号）、pathname（路径部分）等属性，还可以通过方法如 location.assign () 进行页面跳转。

4.1常见属性

location对象属性	返回值
`location.href`	获取或者设置整个URL
`location.host`	返回主机名（域名）
`location.port`	返回端口号，如果没有写返回空字符串
`location.pathname`	返回路径
`location.search`	返回参数
`location.hash`	返回片段， #后面内容常见于链接锚点

案例

5秒自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        setTimeout(function(){
            window.location.href = 'http://www.jd.com'
        },5000);
    </script>
</body>
</html>

案例

获取URL参数

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="index.html" method="get">
        用户名：<input type="text" name="username">
        <!-- <br/>
        密码:   <input type="password" name="pwd" id=""> -->
        <input type="submit" value="登录">
    </form>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是index.html</div>
    <script>
        console.log(location.search); //?username=jack&pwd=123
        //1.去掉?
        var params = location.search.substr(1);
        console.log(params)
        //2.利用字符串分隔为数组
        var arr = params.split('=');
        console.log(arr);
        //3.把数据写入到div中
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎您！'

    </script>
</body>
</html>

4.2常见方法

location常见方法	说明
`location.assign()`	跟href一样，可以跳转页面
`location.replace()`	替换当前的页面，因为不记录历史，所以不能后退的
`location.reload()`	重新加载页面，相当于刷新按钮或者 f5，如果此参数为true表示强制刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            //记录浏览历史
            //location.assign('http://www.baidu.com');
            //location.href = 'http://www.baidu.com'
            //不记录浏览历史，所以不可以实现后退功能
            //location.replace('http://www.baidu.com');
            //强制刷新页面
            location.reload(true);
        })
    </script>
</body>
</html>

5.history

history 对象：管理浏览器的历史记录，可以通过 history.back () 后退、history.forward () 前进、history.go () 跳转到特定的历史记录页面。

history对象方法	作用
back()	后退
forward()	向前
go(参数)	如果1表示前进1个页面，如果-1表示后退1个页面

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
</head>
<body>
    <a href="index.html">点击我前往首页</a>
    <button id="btn1">后退</button>
    <button id="btn2">前进</button>
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');

        btn1.onclick = function(){
            //history.back(); //退后
            history.go(-1)
        }
        btn2.onclick = function(){
            // history.forward();//前进
            history.go(1)
        }
    </script>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <a href="list.html">点击我前往list.html</a>
    <button id="btn1">后退</button>
    <button id="btn2">前进</button>
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');

        btn1.onclick = function(){
            history.back(); //退后
        }
        btn2.onclick = function(){
            history.forward();//前进
        }
    </script>
</body>
</html>

6.navigator(了解)

navigator 对象：提供有关浏览器的信息，如浏览器名称、版本、平台等属性，以及检测浏览器功能的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        if(navigator.userAgent.match(/(phone|pad|iPhone|ios|iPad|Android|Mobile)/i)){
            window.location.href = '';//手机
        } else{
            window.location.href = '';//电脑
        }
    </script>
</body>
</html>

三、this的指向问题

this的指向再函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向了谁，一般情况下this的最终指向是那个调用用它的对象，

现阶段：我们先了解以下几个this的指向

全局作用域或者是普通函数this指向全局对象window （注意在定时器里面this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <script>
        //1.全局作用域或者是普通函数中this指向全局对象window(注意定时器里面this指向的是window)
        console.log(this);

        function fn(){
            console.log(this);
        }
        window.fn();

        window.setTimeout(function(){
            console.log(this);
        },1000);

        //2.方法里面谁调用this就指向谁
        var o = {
            name:'张三',
            sayHI:function(){
                console.log(this); //这里的this是o这个对象
            }
        }
        o.sayHI();

        var btn = document.getElementById('btn');
        // btn.onclick = function(){
        //     console.log(this); //this指向btn这个按钮对象
        // }

        btn.addEventListener('click',function(){
            console.log(this);  //this指向btn这个按钮对象
        });

        //构造函数
        function Star(){
            console.log(this); //this指向Star的实例对象
        }
        var star = new Star();
    </script>
</body>
</html>

四、JavaScript的执行机制

1.思考

console.log(1);

setTimeout(function(){
    console.log(3);
},1000)

console.log(2);
打印顺序： 1 2 3

console.log(1);

setTimeout(function(){
    console.log(3);
},0)

console.log(2);
打印顺序： 1 2 3

2.js线程

js是单线程
单线程就意味着，所有的任务需要排队。前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是：如果js执行的时间过长，这样就造成了页面的渲染不连贯，导致页面渲染加载阻塞的感觉

3.同步任务和异步任务

同步

前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致、同步的。比如做饭的做法：先烧水煮饭，切菜和炒菜。

异步

你再做一件事情的时候，因为这件事情会花费很长的时间，再做这件事情的时候，你可以去处理其它的事情。比如做饭的做法：先烧水煮饭，同时切菜和炒菜。

js中异步是通过回调函数实现的。

一般而言，异步任务由以下三种类型

普通任务，如：click、resize等等
资源加载，如：load，error等等
定时器，包括setInterval、setTimeout等等

异步任务相关回调函数添加到任务队列中（任务队列也成为消息队列）

4.js执行机制

先执行”执行栈中的同步任务“
异步任务（回调函数）放入到任务队列中.
一旦执行栈中的所有的同步任务执行完毕，系统就按次序读取”任务队列“中异步任务，于是读取的异步任务结束等待状态，进入到执行栈，开始执行

在这里插入图片描述
由主线程不断的重复获得任务、执行任务、再次获取任务、再执行任务，所以这种机制被称之为：事件循环（event loop)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1);
        
        document.onclick = function(){
            console.log('click');
        }

        setTimeout(function(){
            console.log(3);
        },3000);

        console.log(2);
    </script>
</body>
</html>

异步

js中异步是通过回调函数实现的。

一般而言，异步任务由以下三种类型

普通任务，如：click、resize等等
资源加载，如：load，error等等
定时器，包括setInterval、setTimeout等等

异步任务相关回调函数添加到任务队列中（任务队列也成为消息队列）

4.js执行机制

先执行”执行栈中的同步任务“
异步任务（回调函数）放入到任务队列中.
一旦执行栈中的所有的同步任务执行完毕，系统就按次序读取”任务队列“中异步任务，于是读取的异步任务结束等待状态，进入到执行栈，开始执行

[外链图片转存中…(img-0Dao6zI8-1729324729411)]由主线程不断的重复获得任务、执行任务、再次获取任务、再执行任务，所以这种机制被称之为：事件循环（event loop)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1);
        
        document.onclick = function(){
            console.log('click');
        }

        setTimeout(function(){
            console.log(3);
        },3000);

        console.log(2);
    </script>
</body>
</html>

标签：webAPI,function,console,log,键盘,window,线程,var,document
From： https://blog.csdn.net/qq_63946637/article/details/143079882

webAPI中的键盘事件以及线程

一、常用键盘事件

1.键盘事件

2.键盘事件对象

3.案例一

4.案例二

二、BOM

1.BOM概述

2. 顶级对象window

3.window中常见的事件

3.1onload

3.2resize

3.3setTimeout

案例

3.4setInterval

案例

案例

3.5定时器的停止

4.location

4.1常见属性

案例

案例

4.2常见方法

5.history

6.navigator(了解)

三、this的指向问题

四、JavaScript的执行机制

1.思考

2.js线程

3.同步任务和异步任务

同步

异步

4.js执行机制

异步

4.js执行机制

相关文章

赞助商

阅读排行