本文详细介绍了JavaScript中的键盘事件，包括onkeyup、onkeydown和onkeypress，以及如何使用keyCode属性判断用户按键操作。此外，还讲解了事件冒泡、默认事件的处理方法，并给出了实际应用案例。接着，文章探讨了BOM模块，阐述了BOM的定义、构成，特别是顶级对象window的相关事件和属性，如窗口加载事件、location对象、history对象等。
键盘事件
常用的三个
- onkeyup：当某个按键被松开的时候后触发
- onkeydown：当某个按键被按下的时候触发
- onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift)
注意：
-
如果使用addEventListener不需要加on
-
onkeypress和前面的两个事件区别在于它不识别功能键
-
三个时间的触发顺序是：keydown–keypress–keyup
<script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4. 三个事件的执行顺序 keydown -- keypress -- keyup </script>
键盘事件对象
属性
KeyCode：返回该键的ASCII码值
- keydown和keyup事件对象是同样的，事件不区分字母大小写(大写)，keypress会区别大小写
- 在实际开发中，使用更多的是keydown和keyup，能够识别所有按键
- keypress识别大小写返回大小写不同的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>
事件冒泡和默认事件
- 阻止默认事件：e.preventDefault();
- 阻止事件冒泡：e.stopPropagation();
- 两个都阻止： return false;(原生JS里面无法阻止事件冒泡)
案例
-
模仿京东搜索栏按下S键光标进入
<input type="text"> <script> // 实现思路 // 检测用户是否按下了S键，如果按下了将光标定位到搜索框里面 window.onload=function(){ // 【1】先获取搜索框 var search=document.querySelector("input"); // 【2】给document添加keyup事件 document.addEventListener("keyup",function(e){ // 【3】获取并判断按下的键值是不是S if(e.keyCode===83){ // 【4】设置光标到搜索框内部 search.focus(); } }) } </script> -
快递单查询案例
<div class="base"> <div class="content">123</div> <input type="text" class="search" placeholder="请输入您的快递单号"> </div> <script> // 快递单号输入内容时，上面的大号盒子显示 // 表单检测用户的输入操作，给表单添加键盘事件 // 当用户输入单号时，将表单里面的value值同时赋给content盒子，innerText window.onload=function(){ var div=document.querySelector(".content"); var txt=document.querySelector(".search"); txt.addEventListener("keyup",function(){ if(txt.value==""){ div.style.display="none"; }else{ div.style.display="block"; div.innerText=this.value; } }); txt.addEventListener("blur",function(){ div.style.display="none"; }); txt.addEventListener("focus",function(){ if(txt.value!=""){ div.style.display="block"; } }) } </script>
BOM模块
什么是BOM
浏览器对象模型，提供了一些独立于内容页面与浏览器窗口进行交互的对象接口，它的核心是window对象
BOM也是由一系列相关的对象组成，并且每个独享都提供了很多方法和属性
但是BOM缺少标准化，JS的语法的标准化是ECMA组织提出的，DOM的标准化组织W3C，BOM最初始Netscape浏览器标准的一部分。
DOM和BOM
DOM
- 文档对象模型
- DOM将文档当做一个对象来处理
- DOM的顶级对象是document
- 主要学习的是对页面元素的操作
- DOM是W3C标准规范
BOM
- 浏览器对象模型
- 将浏览器当做一个对象来处理
- BOM的顶级对象是window
- 学习的是浏览器窗口交互的一些对象
- 是浏览器厂家在格子浏览器上定义的规范
BOM的构成
BOM是比DOM更大的盒子对象
window对象：document、location、navigation、screen、history
顶级对象window
window对象是浏览器的顶级对象，具有双重角色
- 是JS访问浏览器窗口的一个接口
- 是一个全局对象，声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法
注意：理解为全局的变量和方法函数在调用的时候其实是省略了window.操作
Window对象的常见事件
窗口加载事件（2种）
第一种：
window.onload=function(){}
或者
window.addEventListener("load",function(){});
onload事件是页面的加载事件，当文档内容(包含图像、脚本文件、css文件等)全部加载完成会触发的事件
第二种：
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script>
调整窗口大小事件
window.onresize=function(){}
window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意：
-
只要窗口大小发生像素变化，就会触发这个事件。
-
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
<script> // 注册页面加载事件 window.addEventListener('load', function() { var div = document.querySelector('div'); // 注册调整窗口大小事件 window.addEventListener('resize', function() { // window.innerWidth 获取窗口大小 console.log('变化了'); if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block'; } }) }) </script> <div></div>
文档加载事件
window.addEventListener("DOMContentLoaded",function(){
console.log(document.querySelector("h1"));
})
DOMContentLoaded也是一个加载事件，文档加载事件，只需要考虑DOM元素(不包含图片、css、flash等)加载完成，IE9以上
定时器事件(两种)
setTimeout();
serInterval();
setTimeout()定时炸弹
使用时指定一个时间段，只要时间到了直接执行绑定函数
window.setTimeout(function(){
alert("hello");
},3000)
第一个参数：事件所执行的函数；
第二个参数：时间间隔以毫秒为单位
setTimeout()这个调用函数我们也称为回调函数callback
注意：
-
绑定函数，回调函数callback，这个函数可以直接写在方法参数所在位置，还可以采取字符串"函数名()"，还可以直接写函数名，三种调用方式，不推荐使用字符串方式
-
延迟的毫秒数可以省略，默认为0，如果写必须是毫秒
-
如果定时器比较多的话，可以给每个定时器一个标识符
<script> // 回调函数是一个匿名函数 setTimeout(function() { console.log('时间到了'); }, 2000); function callback() { console.log('爆炸了'); } // 回调函数是一个有名函数 var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); </script>
停止定时器
window.clearTimeout(second);
方法取消了先前通过调用setTimeout建立的定时器，参数就是要停止的定时器的标识符
serInterval()闹钟定时器
开启定时器
window.setInterval(回调函数，（）间隔的毫秒数)；
使用时指定一个时间段，然后每隔这个时间段都会调用一次回调函数
var i=0;
window.setInterval(function(){
console.log(i);
i++;
},1000);
哪怕是第一次执行回调函数也是在时间到了之后执行的
停止定时器
window.clearInterval(id)
location对象
location对象介绍
window对象给我们提供了一个location属性，这个对象主要用于获取或设置窗体的url地址，并且可以用于解析url。
URL
统一资源定位符(Uniform Resource Location)是互联网上的标准资源地址，网络所有的数据都以文件形式保存，每个文件在网络世界中都有一个唯一的URL，它包含的信息指出文件的所在位置及浏览器的处理方式
url语法：
protocol://host[:port]/path/…
http://www.yltedu.com/…
protocol:协议类型，通信协议http、ftp、mailto等
host:主机名称(域名)
port：端口号可选，如果省略使用的是默认的端口，http默认的端口号是 80
path：路径由0个或多个"/"+文件地址等组成，表示主机上的文件地址目录
属性
- href：获取或设置一个url
- host：返回主机(域名)
- port：返回端口号，如果未写返回空字符串
- pathname：返回路径
- search：返回参数，URL参数是指URL地址中网址之后的?以后
- hash：返回片段，URL中#后面的内容
方法
- assign()：和href一样，可以跳转页面，重定向跳转
- replace()：替换当前页面，不记录入历史中，所以不能后退页面
- reload()：重新载入页面，相当于刷新按钮，如果参数为true相当于强制刷新
navigation对象
navigation对象主要是记录有关浏览器的信息，常用的属性userAgent，这个属性可以返回由客户端发送至服务器的user-agent头部的值
history对象
window对象为提供的一个history对象来进行与浏览器的历史记录进行交互，
常见用法
- back()：实现浏览器后退功能
- forward()：实现浏览器的前进功能
- go(参数)：前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面
扫一扫
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
