Js事件的传播:
- 事件捕获:
1) 捕获阶段:w3c认定捕获阶段是从最外层的祖先元素,向目标元素进行事件的捕获,但是默认不会触发事件
2) 目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3) 冒泡阶段:事件从目标元素向祖先元素传递,依次触发祖先元素上的事件 - 拖拽练习
拖拽的流程:当鼠标在被拖拽元素上按下时,开始拖拽,元素跟随鼠标移动,当鼠标松开,固定到当前位置 - 键盘事件
键盘事件一般可以绑定给一些可以获取到焦点的对象或者是document
onkeyup是键盘抬起,onkeydown键盘按下,keyCode按键对应的编码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
/* //按键被按下
document.οnkeyup=function(){
console.log("键盘松开了")
}
//按键被松开
document.οnkeydοwn=function(){
console.log("键盘按下了")
}*/
var ipt=document.getElementsByTagName("input")[0];
ipt.onkeydown=function(event){
event=event||window.event;
if(event.keyCode>=48&&event.keyCode<=57){
//在文本框中输入内容,属于onkeydown的默认行为,取消返回false
return false;
}
}
}
</script>
</head>
<body>
<input type="text" placeholder="请输入姓名"/>
</body>
</html>
- 方块随按键移动事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: darkred;
position: relative;
}
</style>
<script>
window.onload=function(){
//为document绑定按键事件
document.onkeydown=function(event){
event=event||window.event;
var speed=10;
if(event.ctrlKey){
speed=500;
}
switch(event.keyCode){
case 37:
box.style.left=box.offsetLeft - speed+"px";
break;
case 39:
box.style.left=box.offsetLeft + speed+"px";
break;
case 38:
box.style.top=box.offsetTop - speed+"px";
break;
case 40:
box.style.top=box.offsetTop + speed+"px";
break;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
BOM元素:浏览器对象模型
可以通过js来操作浏览器
BOM对象:
Window,代表整个浏览器窗口,同时window也可以是网页的全局对象
Navigator,代表当前浏览器的信息,通过该对象来识别不同的浏览器
Location,代表当前浏览器的地址栏信息
History,代表浏览器历史记录,由于隐私原因,该对象不能获取具体历史记录,只能操作浏览器向前或向后翻页
Screen,代表用户屏幕信息,通过该对象可以获取用户的显示器的相关信息
Netscape网景公司
UserAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
reload刷新
confirm()显示有确认和取消按钮的对话框
定时器简介:
延时调用
//延时调用
setTimeout(function(){
console.log(num++);
},3000)
延时调用的函数不会立即执行,而会隔一段时间后执行,而且只会执行一次