JavaScript Web API第五天

本文详细介绍了JavaScript中常用的键盘事件（onkeyup, onkeydown, onkeypress）的区别、键盘事件对象的keyCode属性应用，以及BOM的概念、构成、window对象的事件和定时器。通过京东输入模拟和快递单号查询案例，展示了如何实战运用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1常用的键盘事件

1.1.1键盘事件

键盘事件	触发条件
onkeyup	某个键盘按下被松开时触发
onkeydown	某个键盘按下被按下时触发
onkeypress	某个键盘按下被按下时触发不能识别功能键比如ctrl

注意
1、使用addEventListener不需要加on
2、onkeypress和全面两个区别，不能识别功能键比如ctrl，shift左右箭头等
3、三个事件的执行顺序：keydown–keypress–keyup

<script>
    //keydown -- keypress -- keyup
    document.addEventListener('keydown',function(){
        console.log('键盘按钮被摁下 -- keydown')
    })

    document.addEventListener('keypress',function(){
        console.log('键盘按钮被摁下 -- keypress')
    })

    document.addEventListener('keyup',function(){
        console.log('键盘按钮被松开 -- keyup')
    })
</script>

1.1.2键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：
1、onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写
2、在我们实际开发中，我们更多的使用keydown和keyup,它能识别所有的键（包括功能键）
3、keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

使用keyCode属性判断用户按下哪个键

 <script>
    // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
        console.log('up:' + e.keyCode);
        // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
        if (e.keyCode === 65) {
            alert('您按下的a键');
        } else {
            alert('您没有按下a键')
        }
    })
    document.addEventListener('keypress', function(e) {
        // console.log(e);
        console.log('press:' + e.keyCode);
    })
</script>

1.1.3案例：模拟京东按键输入内容

<input type="text">

<script>
    let input = document.querySelector('input')
    document.addEventListener('keyup',function(e){
        if(e.keyCode == 83){
            input.focus()
        }
    })
</script>

1.1.4案例：模拟京东快递单号查询

<div class="search">
    <div class="con">123</div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
    let search = document.querySelector('.search')
    let con = document.querySelector('.con')
    let jd = document.querySelector('.jd')
    //输入框失去焦点，隐藏con
    jd.addEventListener('blur',function(){
        con.style.display = 'none'
    })

    //输入框获取焦点，输入框内容不为空，显示con
    jd.addEventListener('focus',function(){
        if(jd.value !== ''){
            con.style.display = 'block'
        }            
    })

    //输入框内容即时显示到con，keyup事件
    jd.addEventListener('keyup',function(){            
            con.innerText = jd.value
    })

1.2BOM

1.2.1 什么是BOM

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window.
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

1.2.2BOM的构成

BOM比DOM更大，它包含DOM
在这里插入图片描述

1.2.3顶级对象window

window对象是浏览器的顶级对象，它具有双重角色
1、它是JS访问浏览器窗口的一个接口
2、是一个全局对象。定义在全局作用中的变量，函数都会变成window对象的属性和方法
在调用的时候可以省略window。
注意：window下的一个特殊属性window.name

1.2.4window对象的常见事件

页面（窗口）加载事件
第一种
window.onload = function () {}
或者
window.addEventListener(‘load’,function(){})；
window.onload是窗口（页面）加载事件，但文档内容完全加载完成会触发该事件（包括图片、脚本文件、CSS文件），就调用处理的函数。
注意：
1、有了window.onload就可以把JS代码写到页面元素的上方，因为onload是页面全部加载完毕再处理函数。
2、window.onload传统注册事件方式只能写一次，如果有多个以最后一个为准
3、如果使用addEventListenter没有限制

第二种
window.addEventListener(‘DOMContentLoaded’,function(){}）
DOMContentLoaded事件触发时，仅当dom加载完成，不包括样式表，图片。flash等。

调整窗口大小事件

<script>
    window.onload = function(){
        //resize
        let div = document.querySelector('div')
        window.addEventListener('resize',function(){
            console.log('窗口变化')
            if(window.innerWidth<800){
                div.style.display = 'none'
            }else{
                div.style.display = 'block'
            }
        })
    }
</script>
<div>111</div>

1.2.5定时器（两种）

setTimeout()
setInterval()

setTimeout()炸弹定时器

开启定时器
window.setTimeout(调用函数，[延迟的毫秒数])
setTimeout()这个调用函数我们也称为回调函数callback
注意：
1、window可以省略
2、这个调用函数可以直接写函数，或者写函数名或者采用字符串’函数名（）'三种方式，第三种不推荐
3、延迟的毫秒数默认是0，如果写就写毫秒数
4、定时器有很多，所以我们要经常给定时器赋值一个标识符

案例 5秒关闭广告

 <script>
    window.addEventListener('load',function(){
        let img = document.querySelector('img')
        setTimeout(function(){
            img.style.display = 'none'
        },5000)
    })
</script>

<img src="./images/xiezi.png">

停止定时器
window.clearTimeout(timeoutID)
clearTimeout(）方法取消了先前通过调用setTimeout()建立的定时器

注意：
1、window可以省略
2、里面的参数就是定时器的标识符。

<script>
    window.addEventListener('load',function(){
        let img = document.querySelector('img')
        let timer = setTimeout(function(){
            img.style.display = 'none'
        },5000)
        let btn = document.querySelector('button')

        //clearTimeOut(timer) timer setTimeOut函数的返回值
        btn.addEventListener('click',function(){
            //取消定时
            clearTimeout(timer)
        })
    })
</script>

<img src="./images/xiezi.png">
<button>取消定时</button>

setInterval（）闹钟定时器

开启定时器：
window.setInteval(回调函数，[间隔的毫秒数])

<script>
    window.onload = function () {
        let div = document.querySelector('div')
        let num = 0
        setInterval(function () {
            div.innerHTML = num++
        }, 3000)
    }

案例：倒计时

<div>
    <span id="hour">1</span>
    <span id="minute">2</span>
    <span id="second">3</span>
</div>
<script>
    window.addEventListener('load', function () {
        let hour = document.querySelector('#hour')
        let minute = document.querySelector('#minute')
        let second = document.querySelector('#second')
        //倒计时截止时间
        let time = +new Date('2022-11-23 12:30:00')


        setInterval(function(){
            let now = +new Date()
            let times = (time - now) / 1000    //把毫秒转成秒

            //换算
            let h = parseInt(times / 60 / 60 % 24)
            h = h < 10 ? '0' + h : h
            
            let m = parseInt(times / 60 % 60)
            m = m < 10 ? '0' + m : m
            
            let s = parseInt(times % 60)
            s = s < 10 ? '0' + s : s
            
            hour.innerHTML = h
            minute.innerHTML = m
            second.innerHTML = s
        }, 1000)
    })
</script>

案例：发送短信倒计时

<input type="text"><button>获取验证码</button>

<script>
    //1、按钮的点击事件
    //2、一个是倒计时，一个是禁用按钮
    //3、倒计时使用setInterval
    //4、60秒到了，让按钮恢复原状，结束倒计时，clearInterval
    window.addEventListener('load', function () {
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            btn.disabled = true
            let seconds = 60
            let time = setInterval(function () {
                btn.innerHTML = (seconds--) + '秒'
            }, 1000)

            setTimeout(function(){
                clearInterval(time)
                btn.disabled = false
                btn.innerHTML = '重新发送'
            },60000)
        })
    })

</script>