JavaScript中常见键盘事件以及BOM中window常用对象

最新推荐文章于 2023-10-06 17:29:30 发布

Ednburgh-

最新推荐文章于 2023-10-06 17:29:30 发布

阅读量308

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/m0_71345904/article/details/125528796

版权

一，键盘事件

keypress键盘按下触发，但是不能识别crtl，shift方向键
keydown键盘按下触发，所有按键都支持，区别于keypress
keyup键盘弹起触发

代码展示：

document.addEventListener("keypress",function(){
		   			   console.log("键盘按下时触发,不能识别crtl shift 方向键")
})
		   
document.addEventListener("keydown",function(){
		   			   console.log("键盘按下时触发")
})
document.addEventListener("keyup",function(){
		   			   console.log("键盘弹起来")
		   })

利用键盘事件，编写回车键添加用户信息小案例

注意核心思想是回车键，参照ASCLL码可以得知回车键的编码（keyCode）为十进制的数字13，所以我们采用if判断来锁定回车键。

具体怎么操作

<body>
    用户信息:
    <span class="user"></span><br>
    <input type="text" id="ustxt">
    <script>
    
var user=document.querySelector('.user')
var ustxt=document.querySelector('#ustxt');
document.addEventListener('keyup',function(e){
    if(e.keyCode==13){
        var massage=ustxt.value
         user.innerHTML=massage
        // console.log(massage);
    }
})

       
    </script>
</body>

效果

二，window常见对象

window是bom中顶级对象，调用的时候可以省略，比如alert（弹窗）
Onload：是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
window.onload = function(){ alert("文档加载结束.."); }
DOMContentLoaded：DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。速度会比onload要快，所以会先执行。
document.addEventListener('DOMContentLoaded', function() { alert(‘执行了...’);})
Onresize：当浏览器窗口打下更改的时候调用。
window.onresize = function(){ alert('窗口被调整了大小'); }
window.addEventListener('resize',function(){ alert('窗口被调整了大小');})

Ednburgh-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中常见键盘事件以及BOM中window常用对象

一，键盘事件keypress键盘按下触发，但是不能识别crtl，shift方向键keydown键盘按下触发，所有按键都支持，区别于keypresskeyup键盘弹起触发代码展示：利用键盘事件，编写回车键添加用户信息小案例注意核心思想是回车键，参照ASCLL码可以得知回车键的编码（keyCode）为十进制的数字13，所以我们采用if判断来锁定回车键。具体怎么操作效果二，window常见对象window是bom中顶级对象，调用的时候可以省略，比如alert（弹窗） Onload：是窗口 (页面）
复制链接

扫一扫