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自动关闭广告:
![](ad.jpg)
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 后退一个页面