Webapi3
常用的键盘事件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发，但它不识别功能键比如ctrl、shift箭头等。
document.οnkeyup=function(){
alert(‘我弹起了’);
}
document.addEventListener(‘keyup’,function(){
alert(‘我弹起了’);
})
document.addEventListener(‘keydown’,function(){
alert(‘我down’);
})//能识别功能键，比如ctrl、shift、左右箭头等
document.addEventListener(‘keypress’,function(){
alert(‘我press’);
})//不能识别功能键，比如ctrl、shift、左右箭头等
三个事件的执行顺序：
keydown–keypress–keyup
如果使用addEventListener不需要加on
键盘事件对象：
keyCode返回键盘上的ASCII码值
1)keyup和keydown事件不区分字母大小写，a和A得到的都是65
2)keypress事件区分字母大小写，
document.addEventListener(‘keyup’,function(e){
console.log(‘up:’+e.keyCode);
if(e.keyCode=65){
alert(‘你按下的是a键’)；
}else{
alert(‘你没有按下a键’)；
}
})
模拟京东按键搜索内容：
var search=document.querySelector(‘input’);
document.addEventListener(‘keyup’,function(e){
if(e.keyCode=83){
search.focus();
}
模拟京东快递单号查询
var con=document.querySelector(’.con’);
var jd_input=document.querySelector(’.jd’);
jd_input.addEventListener(‘keyup’,function(){
if(this.value===’’){
con.style.display=‘none’;
}else{
con.style.display=‘block’;
con.innerText=this.value;
}
})
jd_input.addEventListener(‘blur’,function(){
con.style.display=‘none’;
})
jd_input.addEventListener(‘focus’,function(){
if(this.value!==’’){
con.style.display=‘none’;
}
})
注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中
keyup事件触发的时候文字已经落入文本框了
当失去焦点，隐藏con盒子
获得焦点，显示con盒子
BOM浏览器对象模型：
提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
浏览器厂商自己定义的，兼容性较差
BOM比DOM更大，它包含了DOM
window
document location navigation screen history
window.document.querySelector();
var num=10;
console.log(num);
console.log(window.num);
function fn(){
console.log(11);
}
fn();
window.fn();
注意*******
1.它是JS访问浏览器窗口的一个接口
2.它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（）、prompt（）等
3.window下的一个特殊属性window.name
window对象的常见事件：
窗口加载事件：
window.οnlοad=function(){}//传统注册方式
或者
window.addEventListener(“load”,function(){});//好使的注册方式，没有限制
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
传统注册事件只能写一次，如果有多个，会以最后一个window.onload为准
document.addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等。
调整窗口大小事件：
window.οnresize=function(){}
window.addEventListener(“resize”,function(){});
注意：1.只要窗口大小发生变化，就会触发这个事件
2.我们经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度
两种定时器
window对象给我们提供了2个非常好用的方法–定时器
setTimeout（）定时器：
window.setTimeout（调用函数，[延迟的毫秒数]）
a.设置一个定时器，该定时器在定时器到期后，执行调用函数
b.这个window在调用时可以省略，后面的毫秒数如果省略默认是0
c.这个调用函数可以直接写函数，还可以写函数名 还有一个写法‘函数名（）’
d.这个页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
setTimeout(function(){
console.log(‘时间到了’);
},2000);
function callback(){
console.log(‘爆炸了’);
}
var timer1=setTimeout(callback,3000);
var timer2=setTimeout(callback,3000);
//setTimeout(‘callback()’,3000);//不提倡这个写法
回调函数callback：这个函数需要等待时间，时间到了才去调用这个函数，因此称为回调函数
onclock、addEventListener是回调函数
5s自动关闭广告：
var ad=document.querySelector(’.ad’);
window.setTimeout(function(){
ad.style.display=‘none’;
},5000)
停止定时器：window.clearTimeout(timeout ID)
点击停止定时器
var btn=document.querySelector(‘button’);
var timer=window.setTimeout(function(){
console.log(‘pongpongpong’);
},5000);
btn.οnclick=function(){
window.clearTimeout(timer);
}
**只调用一次就结束
setInterval（）定时器:
window.setInterval(回调函数，[时间毫秒数]);
重复调用一个函数，每隔这个时间，就去调用一次回调函数。
**每隔这个延时时间就去调用这个回调函数，会调用很多次
倒计时案例：
JS执行队列
JS是单线程语言：同一时间只能做一件事
同步 和 异步：
依次执行 同时处理其他事情
本质：这条流水线上的各个流程执行顺序不同
同步任务
异步任务：回调函数，普通事件，资源加载，定时器
执行步骤：
a.先执行栈中的同步任务
b.遇到回调函数，先把回调函数放到任务队列中
c.一旦栈中的同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
多个异步任务：异步进程处理，点击了才会写入任务队列，时间到了才会写入任务队列中
事件循环：由于主线程不断的获得任务、执行任务、再获取任务、在执行，所以这种机制被称为事件循环
location对象
protocol://host[:post]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
.protocol 通信协议 常用的http、ftp、maito等
host 主机（域名）www.itheima.com
port 端口号，可选，省略时使用方案的默认端口，如http的默认端口为80
path 路径由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query 参数，以键值对的形式通过&符号分隔开来
fragment 片段，#后面内容 常见于链接 锚点
location对象的属性 返回值
location.href 获取或设置整个URL
location.host 返回主机域名）www.itcast.cn
location.port 返回端口号，如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容 常见于链接 锚点
5秒之后自动跳转
点击
history对象： back（） 可以后退功能 forward（） 前进功能 go（参数） 前进后退功能，参数如果是1前进一个页面 如果是-1 后退一个页面
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
