一.事件处理模型
当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件
1. 什么是事件处理模型
事件流就是当你单击了某个元素，单击事件不仅仅发生在这个元素上，你也单击了它的父元素、父元素的父元素、……它的祖先元素，甚至单击了整个页面。
“事件流”描述的是页面上各个元素接收事件的顺序。
我们为了描述事件的传播顺序，特意人为规定了两个阶段：捕获阶段（从大到小）、冒泡阶段（从小到大）。点击页面上的一个元素，事件在哪个阶段触发，这取决于添加事件监听的方法。
2. DOM 0级事件绑定
我们之前学习的
oDiv.onclick = function(){
}
这种注册监听的写法，就是DOM0级的事件绑定方法。就是把onclick当做属性添加给了oDiv元素。
通过实验，我们发现，这种事件添加方法，只能监听冒泡过程。事件的捕获阶段，没有监听成功。
这里需要注意，在IE 9、Chrome里面，事件会冒泡到window对象，而IE 6、7、8仅仅冒泡到document对象。
另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题。
注意: DOM0级还有一种写法，直接将监听写在标签里面，工作中基本不用：
<div id="box1" onclick="alert('我是box1');">
<div id="box2" onclick="alert('我是box2');">
<div id="box3" onclick="alert('我是box3');">
</div>
</div>
</div>
写在HTML标签里面代码耦合性很强，三层没有完全分离，工作中不用的。这种写法，也是监听冒泡阶段。
3.DOM 2级事件绑定
DOM 2事件绑定是通过新增的 addEventListener ()来监听事件
oBox.addEventListener("click",function(){
},false);
第1个参数：事件名不用写on， click、mouseover 、mouseout
第2个参数：函数可以是匿名函数，也可以是有名函数
第3个参数：布尔值，true表示监听捕获、false表示监听冒泡阶段
比如:
box1.addEventListener("click", function(){
alert("box1被点击，捕获阶段");
}, true)
第三个参数是true，表示监听box1的捕获阶段的单击事件。
小题目
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
对应的js
box2.addEventListener("click", function(){
alert(1);
}, true); //捕获阶段
box1.onclick = function(){
alert(2); //冒泡阶段
}
box2.addEventListener("click",function(){
alert(3);
},false); //冒泡阶段
弹出顺序1、3、2.
4. 低版本IE的事件绑定
IE6、7、8不支持addEventListener()方法，
oDiv.attachEvent("onclick",函数)
没有第三个参数，也就是说，不能选择监听捕获、冒泡。只能监听冒泡。
box1.attachEvent("onclick", function(){
alert("box1");
});
第一个参数，必须写on，和addEventListener()不一样；
第二个参数，就是事件处理函数
没有第三个参数，只能监听冒泡。所以和on***写法一样。
事件流永远是先下后上，先捕获后冒泡。但是不同的添加监听的方式，决定了能够监听那一部分。
总结
- DOM 0级的方式，只能监听冒泡阶段。不能有同名的事件，会覆盖。
- this是触发事件的这个元素。
- 高版本浏览器会冒泡到window，
- 低版本浏览器冒泡到document。
- DOM 2级的方法，addEventListener()，
- 可以自由设置冒泡、捕获。第三个参数: true就是捕获，false就是冒泡。
- 事件名不加on，可以有同名事件，会顺序执行，不覆盖。
- this是触发事件的这个元素。
- 事件会冒泡到window。
- IE 6、7、8是自己的方法，attachEvent()，
- 只能监听冒泡阶段。没有第三个参数。
- 事件名写on。可以有同名事件，会反着执行（事件栈）。
- this很蛋疼，是window而不是触发事件的这个元素。
- 事件仅仅冒泡到document。
三. 事件对象
任何的事件处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是事件对象。
通常用形参event来接收：
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1></h1>
<div class="box">
我是盒子
</div>
<script>
var oh1 =document.querySelector("h1")
var obox =document.querySelector(".box")
obox.onclick = function (event) {//事件对象：在你触发事件的时候，js会给事件处理函数传递一个实参，这个实参是这个事件触发的详细信息组合的对象
console.log(event);
console.log(event.clientX + "," + event.clientY);//展示在控制台
oh1.innerHTML= event.clientX + "," + event.clientY; //插入到页面
}
</script>
浏览器在调用这个事件处理函数，调用的时候还传进去一个实际参数
这个参数是一个对象，表示这次点击事件的所有细节。比如按的什么按钮、点击的位置等等。
所有这次事件的细节，都被封装到了这个event对象里面。
比如获取鼠标当前位置
document.onmousemove = function(event){
h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;
}
event.clientX表示触发事件的时候，鼠标的x位置（相对于视口）
不同的事件，就有不同的event值。可以想象到键盘事件，没有鼠标的位置。
1. 通用事件对象属性和方法
event.type 返回事件的类型，没有on， 比如”click”
console.log(event.type);//要放到事件函数内部才生效event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它 触发事件源头
event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，当前事件绑定在谁身上
target与currentTarge 、this的用法
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
#wrap{
width: 100px;
height:100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div id="wrap">
</div>
</div>
<script>
var obox = document.querySelector(".box")
obox.onclick = function (event) {
console.log("box",event.target);//触发事件的源头
console.log(event.target === this);
console.log("box",event.currentTarget);//事件绑定的元素
}
wrap.onclick = function (event) {
console.log("wrap",event.target);//触发事件的源头
console.log(event.target === this);
console.log("wrap",event.currentTarget);//事件绑定的元素
}
//总结：.target 表示触发事件流的元素，触发事件流的元素有可能不是自己，而是当前元素嵌套的元素
//currentTarget 始终是事件的绑定元素，也就是说其值始终是this（因此.target 与this用的比较多）
</script>
例子：点击li改变背景，只改变li不改变ul
方法一： 批量绑定事件，需要绑几个事件
<style>
#box {
background-color: #f1f1f1;
}
#box li {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
}
</style>
</head>
<body>
<ul id="box">
<li>首页</li>
<li>简介</li>
<li>产品</li>
<li>内容</li>
</ul>
<script>
var ali = document.querySelectorAll('#box li')
var len =ali.length;
for(var i=0;i<len;i++){
ali[i].index = i
ali[i].onclick = function () {
console.log(this.index);
this.style.backgroundColor = 'red'
}
}
方法二：事件委托只需要绑一个事件，把每个事件委托给每个共同的父级
<style>
#box {
background-color: #f1f1f1;
}
#box li {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
}
</style>
</head>
<body>
<ul id="box">
<li>首页</li>
<li>简介</li>
<li>产品</li>
<li>内容</li>
</ul>
<script>
box.onclick = function (ev) {
ev = ev || ev.window;
if (ev.target.nodeName === 'LI') { //只有点击节点LI才执行操作改变颜色，过滤掉ul
console.log(arguments);//点击事件触发时的详细信息组合对象
console.log(ev.target);//获取点击事件的节点
console.log(ev.target.nodeName);//获取点击事件的节点名称
console.log(ev.target.innerText) //获取点击事件的节点内容
ev.target.style.backgroundColor = 'skyblue'; //利用事件对象上的.target事件源，给触发事件的源头改变背景颜色，
}
}
方法三：事件委托采用事件节流只需要绑一个事件，把每个事件委托给每个共同的父级
<style>
#box {
background-color: #f1f1f1;
}
#box li {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
}
</style>
</head>
<body>
<ul id="box">
<li>首页</li>
<li>简介</li>
<li>产品</li>
<li>内容</li>
</ul>
<script>
box.onclick = function (ev) {
ev = ev || ev.window;
if (ev.target.nodeName !== 'LI') { //节流：只要不是li，事件函数就终止
return;
}
console.log(arguments);//点击事件触发时的详细信息组合对象
console.log(ev.target);//获取点击事件的节点
console.log(ev.target.nodeName);//获取点击事件的节点名称
console.log(ev.target.innerText) //获取点击事件的节点内容
ev.target.style.backgroundColor = 'skyblue'; //利用事件对象上的.target事件源，给触发事件的源头改变背景颜色，
}
</script>
4、event.button 区分左键,中间,右键 0,1,2
box.onmousedown = function (ev) {
ev = ev || ev.window;
console.log(ev.button); // 左0 中1 右2
}
5、阻止事件流
stopPropagation() 停止传播事件流 ，点谁触发谁，不传播了
<style>
#box {
background-color: #f1f1f1;
width: 300px;
height: 300px;
background-color: pink;
}
#box #wrap {
display: inline-block;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap">
</div>
</div>
<script>
box.onclick = function (ev) {
ev = ev || ev.window;
console.log('box', ev);
}
wrap.onclick = function (ev) {
ev = ev || ev.window;
console.log('wrap', ev);
ev.stopPropagation(); //阻止事件流
}
</script>
-
阻止默认事件
右键--菜单、百度图片拖动、a标签跳转、表单提交这些都是网页的默认事件
preventDefault() 阻止默认事件<style> #box { background-color: #f1f1f1; width: 300px; height: 300px; background-color: pink; } #box #wrap { display: inline-block; width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div id="box"> <div id="wrap"> </div> </div> <script> // box.oncontextmenu = function (ev) { //点击鼠标右键触发,浏览器有默认的右键行为 // ev = ev || event.window; // console.log(ev); // ev.preventDefault(); //阻止了这个节点上的默认的右键行为 // }
不想让用户在网页上使用右键，可以在window上绑定。
window.oncontextmenu = function (ev) {
ev = ev || event.window;
console.log(111);
ev.preventDefault();
}
打开控制台可以操作：浏览器右上三点---更多工具---开发者工具
- 事件对象上储存的常用信息
clientX/clientY 鼠标距离浏览器左上角的水平/竖直距离
pageX/pageY 鼠标距离页面左上角的水平/竖直距离
offsetX/offsetY 鼠标距离触发事件的元素左上角的水平/竖直距离
layerX/layerY 鼠标距离最近定位父级元素左上角的水平/竖直距离
screenX/screenY 鼠标距离计算机屏幕左上角的水平/竖直距离
- IE6、7、8的兼容问题
超级兼容大坑：在调用事件处理函数的时候，高级浏览器是传给这个事件处理函数一个实际参数event对象。但是IE6、7、8是给window对象绑定一个当前的event属性。
IE中的鼠标位置
document.onmousemove = function(){
h1.innerHTML = "当前鼠标坐标为" + window.event.clientX + "," + window.event.clientY;
}
3.1 IE 事件对象兼容方法
//在页面上鼠标移动的时候，触发事件
document.onmousemove = function(event){
event = event || window.event; //兼容写法
h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;
}
|| 就是或逻辑短路运算符，如果event有定义，那么就event对象；否则就是window.event对象。
3.2 IE 事件对象中的不兼容的方法
- 阻止默认事件
主流浏览器
event.preventDefault();-
在IE中是一个属性：
event.returnValue = false;document.oncontextmenu = function (ev) { ev = ev || event.window; // ev.returnValue = false; //阻止默认事件也可以这样写，主流浏览器也支持 return false; console.log(111); } 这些的兼容性问题，就用能力检测来解决：
//阻止默认的滚动事件，阻止的方法有浏览器兼容问题：
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
- 阻止事件冒泡
主流浏览器
event.stopPropagation()在IE中是一个属性：
event.cancelBubble=true;这些的兼容性问题，就用能力检测来解决：
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble=true;
}
- 事件源兼容
主流浏览器
event.target在IE中是一个属性：
event.srcElement;这些的兼容性问题，就用短路语法：
var targetElem = event.target || event.srcElement; //事件源兼容写法
总结IE 6、7、8中不支持方法，我们要记住这三个：
event.preventDefault()不兼容！ 在IE 6、7、8中用event.returnValue=false; 代替 //阻止默认事件
event.stopPropagation()不兼容！在IE 6、7、8中用event.cancelBubble=true;代替 //事件冒泡
event.target不兼容，在IE 6、7、8中用event.srcElement代替 //事件源
什么是事件委托
利用事件冒泡的原理把子级的事件委托给祖先元素
优点:
不需要循环绑定每个子元素，可以节约浏览器性能
添加新的子元素时，不需要再给新元素绑定事件
四.滚轮事件
- 滚轮事件及方向值
1.1 滚轮事件
滚轮事件就是鼠标滚动的时候触发，
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<div id="box">wo shi box
</div>
<script>
// 滚轮事件
document.onmousewheel = function (ev) { //DOM0级绑定
ev = ev || window.event;
console.log(ev);
box.innerHTML += ev.wheelDelta + '<br/>'
console.log(ev.wheelDelta); //向下-120 向上 120
}
</script>
onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。
1.2 滚轮方向值
event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：
鼠标往上滚， 120
鼠标往下滚， -120
如果滚动快速，可能出现120的整数倍，正负性是一样的。
onmousewheel事件的触发，是滚轮滚动一“咯噔”触发一次。
- 火狐浏览器不兼容
2.1 获取的滚轮事件
火狐使用自己的专用事件DOMMouseScroll，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。
oDiv.addEventListener("DOMMouseScroll",function(event){
oDiv.innerHTML = event.detail;
},false);
2.2 火狐的滚轮方向值
火狐表示滚动方向的事件的属性叫做event.detail。
detail就是细节的意思。
注意:火狐滚轮方向值和其他的不一样,并且反着的
滚动方向往上，-3；
滚动方向往下，3
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
// 火狐绑定滚轮事件DOM2级事件
document.addEventListener("DOMMouseScroll", function (ev) {
ev = ev || window.event;
console.log(ev);
box.innerHTML += ev.detail + '<br>';
}, false);
</script>
3.兼容性封装
封装处理滚轮详情的函数
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
// 滚轮事件
document.onmousewheel = function (ev) { //DOM0级绑定
ev = ev || window.event;
var wheelDelta = getWheelDetail(ev)
console.log(wheelDelta); //向下-120 向上 120
}
// 火狐绑定滚轮事件DOM2级事件
document.addEventListener("DOMMouseScroll", function (ev) {
ev = ev || window.event;
var detail = getWheelDetail(ev)
console.log(detail);
}, false);
//封装处理滚轮详情的函数
function getWheelDetail(ev) {
if (ev.wheelDelta) { //非火狐
return ev.wheelDelta / 120;
} else { //火狐
return ev.detail / (-3)
}
}
</script>
<style>
#box {
overflow: hidden;
width: 200px;
height: 200px;
border: 2px solid red;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="box">afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas
fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas
fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas
fjdsfsdlf水电费第三方afdafasdfadsfas fjdsfsdlf水电费第三方afdafasdfadsfas
fjdsfsdlf水电费第三方y一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六
</div>
<script>
// 滚轮事件
var tt = 0 //定义信号量
box.onmousewheel = function (ev) { //DOM0级绑定
ev = ev || window.event;
var wheelDelta = getWheelDetail(ev)
tt += wheelDelta * 10 / -1
this.scrollTo(0, tt);
console.log(wheelDelta); //向下-120 向上 120
}
// 火狐绑定滚轮事件DOM2级事件
box.addEventListener("DOMMouseScroll", function (ev) {
ev = ev || window.event;
var detail = getWheelDetail(ev)
tt += detail * 10 / -1
this.scrollTo(0, tt);
console.log(detail);
}, false);
//封装处理滚轮详情的函数
function getWheelDetail(ev) {
if (ev.wheelDelta) { //非火狐
return ev.wheelDelta / 120;
} else { //火狐
return ev.detail / (-3)
}
}
</script>
当我们给Chrome或者IE添加一个DOMMouseScroll事件的时候，会静默，不会报错。
function mousewheelhandler(event){
event = event || window.event; //→ 解决IE6、7、8和高级浏览器的不兼容
//Chrome、IE用的是event.wheelDelta;
if(event.wheelDelta){ //→ 解决火狐和其他浏览器的不兼容
var direction = event.wheelDelta > 0 ? 1 : -1;
}else if(event.detail){
//火狐用的是event.detail;
var direction = event.detail > 0 ? -1 : 1;
}
console.log( direction);
}
这个事件处理程序中，已经屏蔽不兼容。
//给IE、Chrome添加事件
oDiv.onmousewheel = mousewheelhandler;
//给火狐添加事件
oDiv.addEventListener("DOMMouseScroll",mousewheelhandler,false);
例子:
/*
ie/chrome : onmousewheel
event.wheelDelta
上：120
下：-120
firefox : DOMMouseScroll 必须用addEventListener
event.detail
上：-3
下：3
return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();
*/
var oBox = document.getElementById('box');
oBox.onmousewheel = fn;
if(oBox.addEventListener){
oBox.addEventListener('DOMMouseScroll',fn,false);
}
function fn (e){
e = e || window.event;
// console.log(1)
// console.log(e.wheelDelta)
// console.log(e.detail)
var direction
if(e.wheelDelta){ //→ 解决火狐和其他浏览器的不兼容
direction = e.wheelDelta > 0 ? 1 : -1;
}else if(e.detail){
//火狐用的是event.detail;
direction = e.detail > 0 ? -1 : 1;
}
this.style.height = this.offsetHeight - (direction * 10) + 'px';
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
五. 键盘事件
- onkeydown 任意键按下会触发，按下不抬起会一直触发
键盘按下一般跟输入数据，表单有关。当键盘按下时触发的事件
- onkeyup 键盘抬起
当键盘抬起时触发的事件，不会连续触发
- onkeypress 键盘按下
键盘按下触发,和onkeydown相似,onkeypress只有输入键按下触发,onkeydown是键盘上所有按键都会触发
<input id='ipt' type="text">
<script>
ipt.onkeydown = function () {
console.log(111);
}
ipt.onkeyup = function () {
console.log(222);
}
ipt.onkeypress = function(){
console.log(333);
}
</script>
- 常用功能键
ctrlKey shiftKey altKey 对应的keyCode为17,16,19
如果功能键被按下了就是true,没按下就是false
box.onkeydown= function(e){
console.log(e.altKey); //返回布尔值
}
<input id='ipt' type="text">
<script>
ipt.onkeydown = function (ev) {
//控制台显示是键盘事件 ctrlKey shiftKey altKey都是false 如果按下为true
console.log(ev);
console.log(ev.altKey);
}
</script>
keyCode是键码值 ctrlKey， shiftKey ，altKey， Enter对应的键码值为17，16，19，13，左上右下键 对应的keyCode 为37,38,39,40
<input id='ipt' type="text">
<script>
ipt.onkeydown = function (ev) {
//控制台显示是键盘事件 ctrlKey shiftKey altKey都是false 如果按下为true
console.log(ev.keyCode);
}
</script>
5 例子
5.1 留言板功能
方法一通过键码值判断输入的是否是回车键
<ol id="list"></ol>
<input id='ipt' type="text">
<script>
ipt.onkeyup = function (ev) { //鼠标抬起触发
console.log(ev);
// console.log(this.value); //拿的输入的值
if(ev.keyCode ===13){ //回车
list.innerHTML += '<li>'+this.value+'</li>';
this.value = '' //清空输入框
}
}
方法二通过键码判断输入的是否是回车键
<ol id="list"></ol>
<input id='ipt' type="text">
<script>
ipt.onkeyup = function (ev) {
console.log(ev);
if(ev.key === 'Enter'){
list.innerHTML += '<li>'+this.value+'</li>';
this.value = ''
}
}
方法三同时按住ctrl和回车留言成功
<ol id="list"></ol>
<input id='ipt' type="text">
<script>
ipt.onkeyup = function (ev) { //
console.log(ev);
if (ev.key === 'Enter' && ev.ctrlKey) {
list.innerHTML += '<li>' + this.value + '</li>';
this.value = ''
}
}
</script>
方法四
<ol id="oUl">
</ol>
<input id='ipt' type="text">
<script>
ipt.onkeyup = function (e) {
e = e || window.event;
if (this.value != '') {
console.log(e.keyCode)
if (e.keyCode == 13 && e.ctrlKey) {
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if (oUl.children[0]) {
oUl.insertBefore(oLi, oUl.children[0])
} else {
oUl.appendChild(oLi)
}
this.value ='';
}
}
}
</script>
5.2 方向键移动
很low的写法
<style>
#box {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var boxStyle = getComputedStyle(box)
document.onkeyup = function (ev) { // 如果改成document.onkeydown会一直触发
console.log(ev.keyCode);
switch (ev.keyCode) {
case 37: //左
var left = parseInt(boxStyle.left); //截取出来数值
box.style.left = left - 5 + 'px'
console.log(left);
break;
case 38://上
var tt = parseInt(boxStyle.top); //js中top是关键字
box.style.top = tt - 5 + 'px'
console.log(tt);
break;
case 39://右
var left = parseInt(boxStyle.left); //截取出来数值
box.style.left = left + 5 + 'px'
console.log(left);
break;
case 40: //下
var tt = parseInt(boxStyle.top);
box.style.top = tt + 5 + 'px'
console.log(tt);
break;
}
}
</script>
定义信号量的写法，为了少操作DOM
<style>
#box {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var left =0,tt=0;
document.onkeyup = function (ev) { // 如果改成document.onkeydown会一直触发
console.log(ev.keyCode);
switch (ev.keyCode) {
case 37: //左
left = left -5;
box.style.left = left + 'px';
break;
case 38://上
tt =tt-5;
box.style.top = tt + 'px';
break;
case 39://右
left = left +5;
box.style.left = left + 'px';
break;
case 40: //下
tt =tt + 5;
box.style.top =tt + 'px';
}
}
</script>
var oBox = document.getElementById('box');
document.onkeydown = function(e){
e = e || window.event;
switch(e.keyCode){
case 37:
oBox.style.left = oBox.offsetLeft - 10 + 'px';
break;
case 38:
oBox.style.top = oBox.offsetTop - 10 + 'px';
break;
case 39:
oBox.style.left = oBox.offsetLeft + 10 + 'px';
break;
case 40:
oBox.style.top = oBox.offsetTop + 10 + 'px';
break;
}
}
五.捕获错误
try{……}catch(ex){}
try表示尝试，里面的语句可能有错误，catch(ex)参数ex就是try语句段里面出现的错误。在catch里面进行了一个捕获，可以把错误控制在这个catch语句块里，而不向浏览器抛出。
try{
console.log("123");
var a = b; //这行语句有错误，b没有被定义
console.log("哈哈");
}catch(err){
}
console.log("456");
程序的执行逻辑是这样的： 运行try语句块里面的语句，如果遇见了错误的语句，不向浏览器抛出错误。而是执行catch语句段里的语句。try语句里面没有执行完的语句，不执行了。catch语句块执行完毕之后，执行后面的语句。
六.什么是BOM
Broswer Object Model
BOM和DOM类似也是一个编程接口,这个编程接口让JavaScript有能力与浏览器对话 和DOM不同的是,DOM的核心是document,而BOM的核心是window。 在全局环境中的变量&&函数声明自动成为window的属性和值
1.window 对象的方法
window有双重角色, 其一是JavaScript访问浏览器窗口的一个接口, 其二就是ECMAScript的Global对象
1.1 window作为ECMAScript的Global对象
var age = 18;
window.sex = '男'
// 此时age, sex都是window的属性
console.log(window.age)
console.log(window.sex)
1.1 window作为JavaScript访问浏览器窗口
alert() 弹出一个窗口，无返回值
confirm() 弹出一个窗口的同时，增加了两个选择按钮，返回值为布尔值
prompt() 在confirm的基础上，增加了输入框供用户输入内容，返回值为用户输入的内容
open(‘新页面’,’打开方式’) ==>open(''//www.baidu.com'',''_blank'')
<div id="box">打开新页面</div>
<script>
box.onclick = function(){
window.open('http://www.baidu.com','_news') // 第二个参数表示在什么位置打开 _black _self
}
close() 关闭窗口
screenLeft, screenTop (IE, Safari, Opera, Chrome), 分别表示窗口相对于屏幕左边和上边的位置
screenX, screenY (Firefox) 和 screenLeft , screenTop作用一样
innerWidth, innerHeight, outerWidth, outerHeight, 浏览器窗口的大小 注意, 获取浏览器浏览器窗口大小在低版本IE浏览器中使用clientWidth, clidenHeight, 但是, 不同的模式下,这个属性值是放在body, 或documentElement不同的元素上的
获取窗口大小兼容
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
2. location =>浏览器地址栏信息
location是最有⽤的BOM对象之⼀，它提供了与当前窗⼝中加载的⽂档 有关的信息，还提供了⼀些导航功能 注意location既是window的属性也是document的属性,引用的是同一个对象
location的好处能够将一个完整的URL解析为独立的片段 location常用的属性
- location.href 地址栏中完整的url
- location.protocol 地址栏的协议
- location.hostname 地址栏的主机名
- location.port 地址栏的端口号
- location.host 地址栏的主机名+端口号
- location.pathname 地址栏的路径
- location.search 地址栏?后面的字符串
- location.hash 地址栏#后面的字符串
- location.reload() 重新加载,可能是缓存, 如果参数为true, 表示从服务器重新加载
3.history =>某窗口的历史页面
console.log(window.history);
history对象保存着⽤户上⽹的历史记录，从窗⼝被打开的那⼀刻算起。
history.length 历史页面个数 history.back() 跳转到前一个页面 history.forward() 跳转到后一个页面 history.go(参数) 跳转到第几个页面 参数为数字 可正可负
4. navigator =>浏览器的信息
navigator 浏览器信息对象
navigator.userAgent 浏览器的版本号
