一,键盘事件
-
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('窗口被调整了大小');})