事件基础和调用
事件介绍
-
在之前的学习中,我们接触过鼠标点击事件(即onclick)。那事件究竟是什么呢?
举个例子,当我们
点 击
一个按钮时,会弹出
一个对话框。其中“点击”就是一个事件,“弹出对话框”就是我们在点击这个事件里 面做的一些事情。 -
在JavaScript中,一个事件应该有3部分:
-
事件主角:是按钮呢?还是div元素呢?还是其他?
-
事件类型:是点击呢?还是移动呢?还是其他?
-
事件过程:这个事件都发生了些什么?
-
-
在JavaScript中,事件一般是用户对页面的一些“小动作”引起的,例如
按下鼠标
、移动鼠标
等,这些都会 触发相应的一个事件。-
JavaScript常见的事件共有以下5种:
-
鼠标事件
-
键盘事件
-
表单事件
-
编辑事件
-
页面事件
-
-
事件调用方式
在JavaScript中,调用事件的方式有两种:
-
在script标签中调用
-
在元素中调用
在script标签中调用
-
在script标签中调用事件,指的是在< script >< /script >标签内部调用事件。
-
语法:
obj.事件名 = function() { …… };
-
说明:obj是一个DOM对象.
由于上面是一个赋值语句,而语句一般都是要以英文分号结束的,所以最后需要添加一个英文分号 (;)。虽然没加上也不会报错,不过为了规范,还是加上比较好。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { //获取元素 var oBtn = document.getElementById("btn"); //为元素添加点击事件 oBtn.onclick = function () { alert("事件基础学习"); }; } </script> </head> <body> <input id="btn" type="button" value="弹出" /> </body> </html>
在元素中调用事件
在元素中调用事件,指的是直接在HTML属性中来调用事件,这个属性又叫做“事件属性”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes() {
alert("老师带你学习事件");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>
等价于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" onclick="alert('老师带你学前端')" value="弹出" />
</body>
</html>
- 在script标签中调用事件,我们需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素,然后才能对其进行事件操作。
- 在元素属性中调用事件,我们是不需要使用getElementById()、getElementsByTagName()等方法来获 取想要的元素的,因为系统已经知道事件的主角是哪个元素了。
- 在实际开发中,我们更倾向于在script标签中调用事件,因为这种方式可以使得结构(HTML)与行为 (JavaScript)分离,代码更具有可读性和维护性。
鼠标事件
鼠标事件介绍
事件操作是JavaScript核心之一,也是学习的重中之重,因为JavaScript本身就是一门基于事件的编程语 言。
事件 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移出事件 |
onmousedown | 鼠标按下事件 |
onmouseup | 鼠标松开事件 |
onmousemove | 鼠标移动事件 |
鼠标单击
单击事件onclick,单击事件不只是按钮才有,任何元素我们都可以为它添加单击事件!
鼠标移入和鼠标移出
当用户将鼠标移入到某个元素上面时,就会触发onmouseover事件。
如果将鼠标移出某个元素时,就会 触发onmouseout事件。
onmouseover和onmouseout这两个平常都是形影不离的。 onmouseover和onmouseout分别用于控制鼠标“移入”和“移出”这两种状态。
例如在下拉菜单导航中, 鼠标移入会显示二级导航,鼠标移出则会收起二级导航。
鼠标按下和鼠标松开
当用户按下鼠标时,会触发onmousedown事件。
当用户松开鼠标时,则会触发onmouseup事件。
onmousedown表示鼠标按下的一瞬间所触发的事件,而onmouseup表示鼠标松开的一瞬间所触发的 事件。当然我们都知道,只有“先按下”才能“再松开”。
键盘事件
键盘事件介绍
在JavaScript中,常用的键盘事件共有2种。
-
键盘按下:onkeydown
-
键盘松开:onkeyup
onkeydown表示键盘按下一瞬间所触发的事件,而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说,都是先有“按下”,才有“松开”,也就是onkeydown发生在onkeyup之前。
统计输入字符的长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oTxt = document.getElementById("txt");
var oNum = document.getElementById("num");
oTxt.onkeyup = function () {
var str = oTxt.value;
oNum.innerHTML = str.length;
};
};
</script>
</head>
<body>
<input id="txt" type="text" />
<div>字符串长度为:<span id="num">0</span></div>
</body>
</html>
//输入:请问 输出:字符串长度为:3
//输入:12345 输出:字符串长度为:5
//输入:qwert 输出:字符串长度为:5
//输入:asas是的 输出:字符串长度为:6
飞机移动小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#player {
position: absolute;
top: 600px;
left: 600px;
}
</style>
<script>
window.onload = function () {
var player = document.getElementById("player");
window.document.onkeydown = function (ent) {
var event = ent || window.event;
//alert(event.keyCode);
switch (event.keyCode) {
case 87: //w
case 38: //上
player.style.top = player.offsetTop - 10 + "px";
break;
case 83: //s
case 40: //下
player.style.top = player.offsetTop + 10 + "px";
break;
}
}
};
</script>
</head>
<body>
<img src="../GroupBuying/img/waimai.png" alt="飞机" id="player">
</body>
</html>
表单事件
表单事件介绍
在JavaScript中,常用的表单事件有3种。
-
onfocus和onblur
-
onselect
-
onchange
onfocus和onblur
onfocus表示获取焦点时触发的事件,而onblur表示失去焦点时触发的事件,两者是相反操作。
例如:用户准备在文本框中输入内容时,此时它会获得光标,就会触发onfocus事件。当文本框失去光标 时,就会触发onblur事件。
并不是所有的HTML元素都有焦点事件,具有“获取焦点”和“失去焦点”特点的元素只有2种。
-
表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)
-
超链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #search { color: #bbbbbb; } </style> <script> window.onload = function () { //获取元素对象 var oSearch = document.getElementById("search"); //获取焦点 oSearch.onfocus = function () { if (this.value == "百度一下,你就知道") { this.value = ""; } }; //失去焦点 oSearch.onblur = function () { if (this.value == "") { this.value = "百度一下,你就知道"; } }; } </script> </head> <body> <input id="search" type="text" value="百度一下,你就知道" /> </body> </html>
onselect
在JavaScript中,当我们选中“单行文本框”或“多行文本框”中的内容时,就会触发onselect事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oSearch = document.getElementById("search");
oSearch.onclick = function () {
this.select();
};
}
</script>
</head>
<body>
<input id="search" type="text" value="百度一下,你就知道" />
</body>
</html>
onchange
在JavaScript中,onchange事件常用于“具有多个选项的表单元素”。
-
单选框选择某一项时触发。
-
复选框选择某一项时触发。
-
下拉列表选择某一项时触发。
单选框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oFruit = document.getElementsByName("fruit");
var oP = document.getElementById("content");
for (var i = 0; i < oFruit.length; i++) {
oFruit[i].onchange = function () {
if (this.checked) {
oP.innerHTML = "你选择的是:" + this.value;
}
};
}
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p id="content"></p>
</body>
</html>
复选框的全选与反选:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oSelectAll = document.getElementById("selectAll");
var oFruit = document.getElementsByName("fruit");
oSelectAll.onchange = function () {
//如果选中,即this.checked返回true
if (this.checked) {
for (var i = 0; i < oFruit.length; i++) {
oFruit[i].checked = true;
}
} else {
for (var i = 0; i < oFruit.length; i++) {
oFruit[i].checked = false;
}
}
};
}
</script>
</head>
<body>
<div>
<p><label><input id="selectAll" type="checkbox" />全选/反选:</label></p>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</div>
</body>
</html>
下拉列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oList = document.getElementById("list");
oList.onchange = function () {
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
</script>
</head>
<body>
<select id="list">
<option value="http://wwww.baidu.com">百度</option>
<option value="http://www.sina.com.cn">新浪</option>
<option value="http://www.qq.com">腾讯</option>
<option value="http://www.sohu.com">搜狐</option>
</select>
</body>
</html>
编辑事件
编辑事件介绍
在JavaScript中,常用的编辑事件有3种:
-
oncopy
-
onselectstart
-
oncontextmenu
oncopy
在JavaScript中,我们可以使用oncopy事件来防止页面内容被复制。
-
语法:
document.body.oncopy = function () { return false; }
-
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.body.oncopy = function () { return false; } } </script> </head> <body> <div>我是不能被复制的</div> </body> </html>
onselectstart
在JavaScript中,我们可以使用onselectstart事件来防止页面内容被选取。
- 语法:
document.body.onselectstart=function()
{
return false;
}
-
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.body.onselectstart = function () { return false; } } </script> </head> <body> <div>防止页面内容被选取。</div> </body> </html>
oncontextmenu
在JavaScript中,我们可以使用oncontextmenu事件来禁止鼠标右键。
-
语法:
document.oncontextmenu = function () { return false; }
-
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.oncontextmenu = function () { return false; } } </script> </head> <body> <div>禁用鼠标右键</div> </body> </html>
页面事件
页面事件onload
在JavaScript中,onload表示文档加载完成后再执行的一个事件。
语法:
window.onload = function(){
……
}
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("JavaScript");
};
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
正确的解决方法就是使用window.onload,实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("JavaScript");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
onbeforeunload
在JavaScript中,onbeforeunload表示离开页面之前触发的一个事件。
- 语法:
window.onbeforeunload = function(){
……
}
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
alert("欢迎来");
}
window.onbeforeunload = function (e) {
e.returnValue = "记得下来再来喔!";
}
</script>
</head>
<body>
</body>
</html>
页面事件进阶
页面事件介绍
在JavaScript中,想要给元素添加一个事件,其实我们有以下2种方式。
-
事件处理器
-
事件监听器
事件处理器
在前面的学习中,如果想要给元素添加一个事件,我们都是通过操作HTML属性的方式来实现,这 种方式其实也叫“事件处理器”,
例如: oBtn.onclick = function(){……};
事件处理器的用法非常简单,代码写出来也很易读。不过这种添加事件的方式是有一定缺陷的。先来看 一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("第1次");
};
oBtn.onclick = function () {
alert("第2次");
};
oBtn.onclick = function () {
alert("第3次");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
,我们一开始的目的是想给按钮添加3次onclick事件,但JavaScript最终只会执行最后一次 onclick。从上面也可以看出来了,事件处理器是没办法为一个元素添加多个相同事件的。
事件监听器
绑定事件
- 所谓的“事件监听器”,指的是使用addEventListener()方法来为一个元素添加事件,我们又称之为**“绑定 事件”**。
- 语法:obj.addEventListener(type , fn , false)
- 说明:
- obj是一个DOM对象,指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
- type是一个字符串,指的是事件类型。例如单击事件用click,鼠标移入用mouseover等。一定要注意,这 个事件类型是不需要加上“on”前缀的。
- fn是一个函数名,或者一个匿名函数。
- false表示事件冒泡阶段调用。
此对于addEventListener()的兼容性我们不需要考虑IE浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function () {
alert("第1次");
}, false);
oBtn.addEventListener("click", function () {
alert("第2次");
}, false);
oBtn.addEventListener("click", function () {
alert("第3次");
}, false);
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
//监听到了三次点击,输出了三次
多次调用window.onload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//第1次调用window.onload
window.onload = function () {
var oBtn1 = document.getElementById("btn1");
oBtn1.onclick = function () {
alert("第1次");
};
}
//第2次调用window.onload
window.onload = function () {
var oBtn2 = document.getElementById("btn2");
oBtn2.onclick = function () {
alert("第2次");
};
}
//第3次调用window.onload
window.onload = function () {
var oBtn3 = document.getElementById("btn3");
oBtn3.onclick = function () {
alert("第3次");
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮1" /><br />
<input id="btn2" type="button" value="按钮2" /><br />
<input id="btn3" type="button" value="按钮3" />
</body>
</html>
事件解绑
在JavaScript中,我们可以使用removeEventListener()方法为元素解绑(或解除)某个事件。解绑事件 与绑定事件是相反的操作。
- 语法:obj.removeEventListener(type , fn , false);
- 说明:
- obj是一个DOM对象,指的是使用getElementById()、getElementsByTagName() 等方法获取到的元素节点。
- type是一个字符串,指的是事件类型。例如,单击事件用click,鼠标移入用mouseover等。一定要注意, 这里我们是不需要加上on前缀的。
- 对于removeEventListener()方法来说,fn必须是一个函数名,而不能是一个函数。
举例: 解除“事件监听器”添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oP = document.getElementById("content");
var oBtn = document.getElementById("btn");
//为p添加事件
oP.addEventListener("click", changeColor, false);
//点击按钮后,为p解除事件
oBtn.addEventListener("click", function () {
oP.removeEventListener("click", changeColor, false);
}, false);
function changeColor() {
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<p id="content">老师带你</p>
<input id="btn" type="button" value="解除" />
</body>
</html>
举例:解除“事件处理器”添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oP = document.getElementById("content");
var oBtn = document.getElementById("btn");
//为P元素添加事件
oP.onclick = changeColor;
//点击按钮后,为p元素解除事件
oBtn.addEventListener("click", function () {
oP.onclick = null;
}, false);
function changeColor() {
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<p id="content">老师带你</p>
<input id="btn" type="button" value="解除" />
</body>
</html>
Event对象
Event对象
当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是event 对象。**每一个事件,都有一个对应的event对象。**给大家打个比喻,我们都知道飞机都有黑匣子,对吧? 每次飞机出事(一个事件)后,我们都可以从黑匣子(event对象)中获取到详细的信息。 在JavaScript中,我们可以通过event对象来获取一个事件的详细信息。
属性 | 说明 |
---|---|
type | 事件类型 |
keyCode | 键码值 |
shiftKey | 是否按下shift键 |
ctrlKey | 是否按下Ctrl键 |
altKey | 是否按下Alt键 |
type
在JavaScript中,我们可以使用event对象的type属性来获取事件的类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function (e) {
alert(e.type);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
实际上,每次调用一个事件的时候,JavaScript都会默认给这个事件函数加上一个隐藏的参数,这个参数 就是event对象。一般来说,event对象是作为事件函数的第1个参数传入的。
其实e仅仅是一个变量名,它存储的是一个event对象。也就是说,e可以换成其他名字,如ev、event、 a等都可以,大家可以测试一下。
event对象在IE8及以下版本还有一定的兼容性,可能还需要采取“var e=e||window.event;”来处理。不 过随着IE退出历史舞台,这些兼容性问题我们慢慢可以不用管了,这里简单了解一下就行。
keyCode
在JavaScript中,如果我们想要获取按下了键盘中的哪个键,可以使用event对象的keyCode属性来获取。
- 语法:event.keyCode
- 说明:event.keyCode返回的是一个数值,常用的按键及对应的键码如表所示。
按键 | 键码 |
---|---|
W(上) | 87 |
S(下) | 83 |
A(左) | 65 |
D(右) | 68 |
↑ | 38 |
↓ | 40 |
← | 37 |
→ | 39 |
如果是shift、ctrl和alt键,我们不需要通过keyCode属性来获取,而是可以通过shiftKey、ctrlKey和 altKey属性获取。
禁止shfit、alt、ctrl键:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
document.onkeydown = function (e) {
if (e.shiftKey || e.altKey || e.ctrlKey) {
alert("禁止使用shift、alt、ctrl键!")
}
}
}
</script>
</head>
<body>
<p> 禁止使用shift、alt、ctrl键!</p>
</body>
</html>
获取“上下左右”方向键:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
window.document.body.onkeydown = function (eve) {
switch (eve.keyCode) {
case 38:
alert("上");
break;
case 39:
alert("右");
break;
case 40:
alert("下");
break;
case 37:
alert("左");
break;
}
}
}
</script>
</head>
<body>
</body>
</html>
this
this对象
在事件操作中,可以这样理解:哪个DOM对象(元素节点)调用了this所在的函数,那么this指向 的就是哪个DOM对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = function () {
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>老师讲授前端~</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = changeColor;
function changeColor() {
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>this指向的问题</div>
</body>
</html>
this所在的函数是changeColor,然后changeColor函数被oDiv调用了,因此this指向的就是oDiv。事实 上,上面两个例子是等价的。
哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象。
window对象
window对象介绍
在JavaScript中,一个浏览器窗口就是一个window对象。我们可以用这个对象的属性和方法来操作这个 窗口。
window对象存放了这个页面的所有信息,为了更好分类处理这些信息,window对象下面又分为很多对 象,如下图所示。
子对象 | 说明 |
---|---|
document | 文档对象,用于操作页面元素 |
location | 地址对象,用于操作URL地址 |
navigator | 浏览器对象,用于获取浏览器版本信息 |
history | 历史对象,用于操作浏览历史 |
screen | 屏幕对象,用于操作屏幕宽度高度 |
document对象也是window对象下的一个子对象。很多人以为一个窗口就是一个document对象,其实 这个理解是错的。因为一个窗口不仅仅包括HTML文档,还包括浏览器信息、浏览历史、浏览地址等 等。
window对象及下面这些location、navigator等子对象,由于都是操作浏览器窗口的,所以我们又称之 为“BOM”,也就是Browser Object Module(浏览器对象模型)。
此外,你也可以把window下的子对象看成是它的属性,只不过这个属性也是一个对象,所以我们才称 之为“子对象”。对象一般都有属性和方法,上表介绍的是window对象的属性。实际上,window对象也 有非常多的方法,常用的如下表所示。
方法 | 说明 |
---|---|
alert() | 提示对话框 |
confirm() | 判断对话框 |
prompt() | 输入对话框 |
open() | 打开窗口 |
close() | 关闭窗口 |
setTimeout() | 开启“一次性”定时器 |
clearTimeout() | 关闭“一次性”定时器 |
setInterval() | 开启“重复性”定时器 |
clearInterval() | 关闭“重复性”定时器 |
**对于window对象来说,无论是它的属性,还是方法,都可以省略window前缀。**例如window.alert()可 以简写为alert(),window.open()可以简写为open()。
window对象窗口操作
window对象窗口操作
在JavaScript中,窗口常见的操作有两种:一种是“窗口”;另外一种是“关闭窗口”。打开窗口和关闭窗 口,在实际开发中经常用到
打开窗口
- 在JavaScript中,我们可以使用window对象的open()方法来打开一个新窗口。
- 语法:window.open(url, target)
- 说明:
- window.open()可以直接简写为open(),不过我们一般都习惯加上window前缀。window.open()参 数有很多,但是只有url和target这两个用得上。
- url指的是新窗口的地址,如果url为空,则表示打开一个空白窗口。空白窗口很有用,我们可以使 用document.write()往空白窗口输出文本,甚至输出一个HTML页面。
- target表示打开方式,它的取值跟a标签中target属性的取值是一样的,常用取值有两个: _ blank 和_self。当target为 _ blank(默认值),表示在新窗口打开;当target为 _ self时,表示在当前窗口打 开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
window.open("http://www.baidu.com");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="打开"/>
</body>
</html>
打开一个空白窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var opener = window.open();
opener.document.write("这是一个新窗口");
opener.document.body.style.backgroundColor = "lightskyblue";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="打开" />
</body>
</html>
这段代码实现的效果是:打开一个新的空白窗口,然后往里面输出内容。可能很多人会对var opener = window.open();这句代码感到困惑:“为什么window.open()可以赋值给一个变量呢?”
实际上,window.open()就像函数调用一样,会返回(也就是return)一个值,这个值就是新窗口 对应的window对象。也就是说,此时opener就是这个新窗口的window对象。既然我们可以获取到新 窗口的window对象,那么想要在新窗口页面干点什么,如输出点内容、控制元素样式等,就很简单 了。
关闭窗口
- 在JavaScript中,我们可以使用window.close()来关闭一个新窗口。
- 语法:window.close()
- 说明:window.close()方法是没有参数的。
关闭新窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var btnOpen = document.getElementById("btn_open");
var btnClose = document.getElementById("btn_close");
var opener = null;
btnOpen.onclick = function () {
opener = window.open("http://www.baidu.com");
};
btnClose.onclick = function () {
opener.close();
}
}
</script>
</head>
<body>
<input id="btn_open" type="button" value="打开新窗口" />
<input id="btn_close" type="button" value="关闭新窗口" />
</body>
</html>
分析:
当我们点击【打开新窗口】按钮后,再点击【关闭新窗口】按钮,就会把新窗口关闭掉。 window.close()关闭的是当前窗口,opener.close()关闭的是新窗口。从本质上来说,window和opener 都是window对象,只不过window指向的是当前窗口,opener指向的是新窗口。
window对话框
window对话框
在JavaScript中,对话框有3种: alert()、confirm()和prompt()。它们都是window对象的方法。前 面我们说过,对于window对象的属性和方法,是可以省略window前缀的,例如window.alert()可以简 写为alert()。
alert()
alert()对话框一般仅仅用于提示文字。这个方法在之前都用到烂了,这里我们就不 用多说。对于alert(),只需记住一点就行:在alert()中实现文本换行,用的是\n。
confirm()
-
confirm()对话框不仅提示文字,还提供确认。
-
语法:confirm(“提示文字”)
-
说明:如果用户点击【确定】按钮,则confirm()返回true。如果用户点击【取消】按钮,则confirm()返回false
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { if (confirm("确定要跳转到首页吗?")) { window.location.href = "http://www.baidu.com"; } else { document.write("你取消了跳转"); } }; } </script> </head> <body> <input id="btn" type="button" value="回到首页" /> </body> </html>
分析
在弹出的confirm()对话框中,当我们点击【确定】按钮时,confirm()会返回true,然后当前窗口就会跳 转到百度首页。当我们点击【取消】按钮时,confirm()会返回false,然后就会输出内容。
prompt()
-
prompt()对话框不仅提示文字,还返回一个字符串。
-
语法:prompt(“提示文字”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var name = prompt("请输入你的名字");
document.write("欢迎来到<strong>" + name + "</strong>");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
定时器
定时器介绍
在浏览器网页的过程中,我们经常可以看到这样的动画:轮播效果中,图片每隔几秒就切换一次; 在线时钟中,秒针每隔一秒转一次。
- 语法:setTimeout(code, time);
- 说明:
- 参数code可以是一段代码,可以是一个函数,也可以是一个函数名。
- 参数time是时间,单位为毫秒,表示要过多长时间才执行code中的代码。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
setTimeout('alert("欢迎来到老师的学习课程");', 2000);
}
</script>
</head>
<body>
<p>2秒后提示欢迎语。</p>
</body>
</html>
clearTimeout()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px solid silver;
}
</style>
<script>
window.onload = function () {
//获取元素
var oBtn = document.getElementsByTagName("input");
//timer存放定时器
var timer = null;
oBtn[0].onclick = function () {
timer = setTimeout(function () {
alert("欢迎来到老师的前端课程");
}, 2000);
};
oBtn[1].onclick = function () {
clearTimeout(timer);
};
}
</script>
</head>
<body>
<p>点击“开始”按钮,2秒后提示欢迎语。</p>
<input type="button" value="开始" />
<input type="button" value="暂停" />
</body>
</html>
setInterval()
在JavaScript中,我们可以使用setInterval()方法来“重复性”地调用函数,并且可以使用 clearInterval()来取消执行setInterval()。
- 语法:setInterval(code, time);
- 说明:
- 参数code可以是一段代码,可以是一个函数,也可以是一个函数名。
- 参数time是**时间,**单位为毫秒,表示要过多长时间才执行code中的代码。
setInterval()跟setTimeout()语法是一样的,唯一不同的是:setTimeout()只执行一次;而 setInterval()可以重复执行无数次。对于setInterval()来说,下面3种方式都是正确的,这个跟 setTimeout()一样:
//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)
clearInterval()
在JavaScript中,我们可以使用setInterval()方法来“重复性”地调用函数,并且可以使用 clearInterval()来取消执行setInterval()。
setInterval("console.log(1)",1000);
function ae(){
alert(1);
}
setInterval(ae,1000);
var timere = setInterval(function(){
alert(1);
},2000);
console.log(timere);
clearInterval(timere); //会结束掉循环
倒计时效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义全局变量,用于记录秒数
var n = 5;
window.onload = function () {
//设置定时器,重复执行函数countDown
setInterval(countDown, 1000);
}
//定义函数
function countDown() {
//判断n是否大于0,因为倒计时不可能有负数
if (n > 0) {
n--;
document.getElementById("num").innerHTML = n;
}
}
</script>
</head>
<body>
<p>倒计时:<span id="num">5</span></p>
</body>
</html>
window对象-location对象
window对象-location对象介绍
在JavaScript中,我们可以使用window对象下的location子对象来操作当前窗口的URL。所谓URL,指的 就是页面地址。对于location对象,我们只需要掌握以下3个属性,如表所示 。
属性 | 说明 |
---|---|
href | 当前页面地址 |
search | 当前页面地址“?”后面的内容 |
hash | 当前页面地址“#”后面的内容 |
window.location.href
在JavaScript中,我们可以使用location对象的href属性来获取或设置当前页面的地址。
- 语法:window.location.href
- 说明:window.location.href可以直接简写为location.href,不过我们一般都习惯加上window前缀。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var url = window.location.href;
document.write("当前页面地址是:" + url);
</script>
</head>
<body>
</body>
</html>
设置当前页面地址:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
setTimeout(function () {
window.location.href = "http://www.baidu.com";
}, 2000);
</script>
</head>
<body>
<p>2秒后跳转</p>
</body>
</html>
window.location.search
在JavaScript中,我们可以使用location对象的search属性来获取和设置当前页面地址**“?”后面的内容**
- 语法:window.location.search
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write(window.location.search);
</script>
</head>
<body>
</body>
</html>
此时页面是空白的,我们在浏览器地址后面多加上?id=1(要自己手动输入),再刷新页面,就会出 现结果了,浏览器预览效果如图所示。 地址“?”后面这些内容,也叫querystring(查询字符串),一般用于数据库查询,而且是大量用到。
window.location.hash
JavaScript中,我们可以使用location对象的hash属性来获取和设置当前页面地址井号(#)后面的 内容。井号(#)一般用于锚点链接,这个相信大家见过不少了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write(window.location.hash);
</script>
</head>
<body>
</body>
</html
此时页面是空白的,我们在浏览器地址后面多加上#imgId(要自己手动输入),再刷新页面,就会 出现结果了,在实际开发中,window.location.hash用得还是比较少,我们了解一下就行。
window对象-navigator对象
window对象-navigator对象
在JavaScript中,我们可以使用window对象下的子对象navigator来获取浏览器的类型。
- 语法:window.navigator.userAgent
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
alert(window.navigator.userAgent);
</script>
</head>
<body>
</body>
</html>
不同浏览器,会弹出相应的版本号信息。不过这3种浏览器都含有独一无二的字符:IE含有“MSIE”; Chrome含有“Chrome”;而Firefox含有“Firefox”。根据这个特点,我们可以判断当前浏览器是什么类型 的浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
alert("这是IE");
} else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
alert("这是Chrome");
} else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
alert("这是Firefox");
}
</script>
</head>
<body>
</body>
</html>
这里注意一下,对于IE浏览器来说,上面代码只能识别IE10及以下版本,如果想要识别所有的IE浏览 器,我们应该使用下面代码来进行判断:
if (!!window.ActiveXObject || "ActiveXObject" in window){
alert("这是IE");
}
判断浏览器类型也是经常用到的,特别是在处理不同浏览器兼容性上,我们就需要根据浏览器的类型来 加载对应的JavaScript处理代码。不过现在浏览器更新迭代非常快,随着IE逐渐退出历史舞台,很多时候 我们已经不再需要考虑浏览器之间的兼容性了。
window对象-document对象
window对象-document对象
我们知道,document对象其实是window对象下的一个子对象,它操作的是HTML文档里所有的内容。事实上,浏览器每次打开一个窗口,就会为这个窗口生成一个window对象,并且会为这个窗口内 部的页面(即HTML文档)自动生成一个document对象,然后我们就可以通过document对象来操作页 面中所有的元素了。
window对象是浏览器为每个窗口创建的一个对象。通过window对象,我们可以操作窗口如打开窗 口、关闭窗口、浏览器版本等,这些又被统称为“BOM(浏览器对象模型)”。
document对象是浏览器为每个窗口内的HTML页面创建的一个对象。通过document对象,我们可以操作页面的元素,这些操作又被统称为“DOM(文档对象模型)”。
由于window对象是包括document对象的,所以我们可以“简单”地把BOM和DOM的关系理解成: BOM包含DOM。只不过对于文档操作来说,我们一般不把它看成是BOM的一部分,而是看成独立的, 也就是DOM。 我们已经在大量使用document对象的属性和方法了,如document.write()、 document.getElementById()、document.body等。