本文详细介绍了JavaScript中的事件，包括事件的概念、事件的三要素、事件流和事件模型，以及DOM0级和DOM2级事件处理程序。此外，还深入讲解了BOM中的Window对象，如系统对话框、打开和关闭窗口、时间函数，以及history、location和document对象的使用。最后探讨了节点操作，如获取节点的方法。内容覆盖了JavaScript在网页交互中的关键应用。
一.事件
1.事件时什么？
事件(Event)是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交 互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
2.事件的三要素：
①事件源
②事件名称
③处理函数
3.常用事件：
| onclick | 点击事件 |
| onBlur | 失焦事件 |
| onfocus | 聚焦事件 |
| onchange | 改变域对象 |
| onmouserover | 鼠标悬停事件 |
| onmouseout | 鼠标移开事件 |
| onkeydown | 键盘按下事件 |
| onkeyup | 键盘弹起事件 |
4.事件流和事件模型
事件顺序有两种类型：事件捕获和事件冒泡。
1）事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为
不具体的节点（文档）。例如下面的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html> 如果点击了页面中的<div>元素，那么这个click 事件会按照如下顺序传播：
①<div>
②<body>
③<html>
④document
也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，
click 事件沿DOM 树向上传播，在每一级节点上都会发生，知道传播到document 对象。
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。
2）事件捕获
Netscape 提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早
接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标
之前捕获它。还以前面的例子为例。那么单击<div>元素就会按下列顺序触发click 事件：
①document
②<html>
③<body>
④<div>
在事件捕获过程中，document 对象首先接收到click 事件，然后沿DOM 树依次向下，一
直传播到事件的实际目标，即<div>元素。
虽然事件捕获是Netscape 唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事
件流模型。尽管“DOM2 级事件”规范要求事件应该从document 对象开始四川博，但这些浏
览器都是从window 对象开始捕获的。
3）DOM 事件流
“DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡
阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。
最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
5.事件处理程序
1）DOM0 级事件处理程序
不能绑定同一个元素同一个事件多次
2）DOM2级事件程序
可以绑定一个元素的内容多次
addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且
他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布
尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段
调用事件处理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button onclick="alert('我被点了');">按钮1</button>
<button onclick="test()">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4" >按钮4</button>
</body>
<script type="text/javascript">
/*DOM0 级事件处理程序*/
function test(){
alert("我又被点了");
}
// 得到按钮对象
var btn = document.getElementById("btn3"); //通过ID获取元素
console.log(btn);
// 给按钮绑定鼠标悬停事件
btn.onmouseover = function() {
alert("我再次被点击了");
}
btn.onmouseover = function() {
alert("我再次被点击了.....");
}
/*DOM2级事件*/
// 获取元素
var btn4 = document.getElementById("btn4");
// 绑定事件
btn4.addEventListener("click",function(){
console.log("这是第4个按钮...");
});
btn4.addEventListener("click",function(){
console.log("这是第4个按钮。。。。");
});
btn4.addEventListener("mouseout",function(){
console.log("离开第4个按钮...");
// 移除事件
btn4.removeEventListener("click",tt)
});
btn4.addEventListener("click",tt);
function tt() {
console.log("第三次被打印...");
}
</script>
</html>
二.BOM
ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（浏览
器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功
能与任何的网页内容无关。
1.Window对象
1）系统对话框
浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用对话框向用户显示消息。
（1）消息框:alert， 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
2）打开窗口
window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
_self、_parent、_top、_blank
3）关闭窗口
window.close()：关闭窗口。
只能关闭被open打开的窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<button onclick="openAlert()">alert</button>
<button onclick="openpPrompt()">prompt</button>
<button onclick="openCinfirm()">confirm</button>
<br /><br />
<button onclick="openPage()">打开页面</button>
<button onclick="closePage()">关闭页面</button>
</body>
<script type="text/javascript">
/**
* 打开弹出框
*/
function openAlert() {
window.alert("这是弹出框");
console.log("。。。");
}
/**
* 输入框
*/
function openpPrompt() {
var name = window.prompt("请输入用户名：","");
alert("输入的值为：" + name);
}
/**
* 确认框
*/
function openCinfirm() {
var flag = window.confirm("您确认要删除这条记录吗？");
if (flag) {
alert("删除成功...");
} else {
alert("没事儿别瞎点。。。");
}
}
/*window.open()方法*/
function openPage () {
//window.open();// 打开新的空白页(新开的)
// window.open("http://www.baidu.com");
// window.open("http://www.baidu.com",'_self');
// window.open("index.html");
window.open("01-window对象.html","_self");
}
/**
* 关闭当前页面
*/
function closePage () {
window.close(); // Scripts may close only the windows that were opened by it.
}
</script>
</html>
4）时间函数
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以
cliearTimeout(id) 来清除指定函数的执行
在 times 毫秒后执行 function 指定的方法，执行之前也可以取消
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据
返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间函数</title>
</head>
<body>
<button onclick="openBaidu()">3秒钟跳转到百度</button>
<button onclick="stopPrint()">停止打印</button>
<br /><hr /><br />
<button onclick="startDate()">开始</button>
<button onclick="stopDate()">暂停</button>
<h2 id="mydate">当前时间：</h2>
</body>
<script type="text/javascript">
function openBaidu(){
alert("3秒钟跳转到百度...");
setTimeout(function(){
// 打开到百度
window.open("http://www.baidu.com");
},3000);
}
//var id = setTimeout(test,1000);
function test() {
console.log("。。。");
id = setTimeout(test,1000);
}
/**
* 停止函数
*/
function stopPrint() {
clearTimeout(id);
}
/*每隔几秒打印一次*/
var id2 = setInterval(function(){
console.log("正在打印...");
},1000);
clearInterval(id2);
/*时间实例*/
var dateId;
/**
* 开始时间
*/
function startDate () {
dateId = setInterval(getDate,1000);
}
/**
* 结束时间
*/
function stopDate() {
clearInterval(dateId);
}
function getDate() {
// 通过id属性获取dom元素对象
var mydate = document.getElementById("mydate");
//console.log(mydate);
// 获取元素的值（非表单元素） innerHTML或innerText
//var value = mydate.innerHTML;
//console.log(value);
// 给元素赋值
//mydate.innerHTML = "你好";
// 得到系统当前时间
var currentDate = new Date();
var localDate = currentDate.toLocaleString();
console.log(localDate);
// 当秒数为0时，字体颜色变红
// 得到时间的秒数
var seconds = currentDate.getSeconds();
console.log(seconds);
if (seconds == 0) {
// 将时间赋值给h2标签
mydate.innerHTML = "当前时间：<span style='color:red'>" + localDate + "</span>";
} else {
// 将时间赋值给h2标签
mydate.innerHTML = "当前时间：" + localDate;
}
}
</script>
</html>2. history 对象的属性：
length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访
问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<h2>我是第一个页面</h2>
<a href="03-history对象-a.html">跳转到A页面</a>
<a href="javascript:void(0);" onclick="window.history.forward();">跳转到下个页面</a>
</body>
<script type="text/javascript">
// 得到url的数量
console.log(window.history.length);
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<h2>B页面</h2>
<a href="javascript:void(0);" onclick="window.history.back();">回到上个页面</a>
<a href="javascript:void(0);" onclick="window.history.go(-2);">回到第一个页面</a>
</body>
<script type="text/javascript">
// 得到url的数量
console.log(window.history.length);
</script>
</html>3.location 对象
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<button onclick="reload1()">刷新</button>
</body>
<script type="text/javascript">
// 得到当前的url
var url = window.location.href;
console.log(url);
// 跳转到指定页面
//window.location.href = "03-history对象.html";
// window.location.href = "http://www.baidu.com";
function reload1() {
// 刷新页面
//window.location.reload();
// 用指定页面替换当前页面
window.location.replace("http://www.baidu.com");
}
</script>
</html>
4.document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚
本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通
过 window.document 属性对其进行访问。
document 对象的body 属性，提供对<body>元素的直接访问，cookie 属性，用来设置
或返回与当前文档有关的所有cookie，write()方法，向文档写HTML 表达式或JavaScript 代码。
还有其他属性和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象</title>
</head>
<body>
<h2>Document</h2>
<form action="http://www.baidu.com">
姓名：<input type="text" id="uname" /><br />
密码：<input type="password" id="upwd" /><br />
<button>登录</button>
</form>
</body>
<script type="text/javascript">
console.log(document.body);
// 向浏览器窗口写数据
document.write("Hello");
// 设置cookie
document.cookie = "zhangsan-123456";
var cook = document.cookie;
console.log(cook);
// 分隔字符串
var user = cook.split("-");
// 给表单元素赋值 value
document.getElementById("uname").value=user[0];
document.getElementById("upwd").value=user[1];
</script>
</html>5.节点
整个html文档 文档节点
文件中的所有标签 元素节点
标签的属性 属性节点
标签中的文本 文本节点
注释 注释节点
1）预加载事件：等文档中的元素及资源加载完毕后才执行的事件
①window.οnlοad=function(){
}
②在body标签上写onload事件
html代码从上往下执行，当获取的元素写在dom元素之前时，代码还未走到dom元素，此时无法找到dom对象， 会返回null；
2）获取节点
方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值
javascript:void(0); 伪协议，表示a标签不执行href属性的跳转行为，而去执行点击事件
javascript:函数名(); 不执行跳转，执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取节点</title>
<script type="text/javascript">
/**
* 预加载事件
*/
function loadWindow() {
console.log("文档加载完毕...");
}
window.onload = function() {
console.log("文档加载完毕。。。");
// 按钮绑定点击事件
document.getElementById("btn").onclick = function(){
var div1 = document.getElementById("div1");
console.log(div1);
}
}
function test() {
var div1 = document.getElementById("div1");
console.log(div1);
}
</script>
</head>
<!--<body onload="loadWindow()">-->
<body>
<button id="btn">按钮</button>
<div id="div1">
DOM对象
</div>
<br /><hr />
<p id="p1" class="para">这是一个段落<span>文本</span></p>
<p id="p1" class="para">这又是一个段落</p>
<input type="text" name="txt" class="para" />
<input type="checkbox" name="hobby" value="swimming" checked />游泳
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<hr />
<a href="javascript:testById();" >按照 id获取元素</a>
<a href="javascript:void(0);" onclick="testByName();">按照 name获取元素</a>
<a href="javascript:void(0);" onclick="testByTagName();">按照标签名获取元素</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class获取元素</a>
</body>
<script type="text/javascript">
// 按照 id获取元素 只会获取一个dom对象，如果出现多个同名Id，则以第一个id的元素为准
function testById (){
var p1 = document.getElementById("p1");
console.log(p1);
}
// 按照 name获取元素
function testByName() {
var hobbys = document.getElementsByName("hobby");
console.log(hobbys);
}
// 按照标签名获取元素
function testByTagName() {
var inputs = document.getElementsByTagName("input");
console.log(inputs.length);
// 定义变量，接收被选中的复选框的值
var cks = "";
// 获取元素的类型 （input中有text、button、radio、checkbox等）
for (var i = 0; i < inputs.length; i++) {
var ty = inputs[i].type;
console.log(ty);
if (ty == "text") { // 获取文本框
// 给文本赋值
inputs[i].value = "admin";
} else if (ty == "checkbox") { // 获取复选框
//console.log(inputs[i].checked);
// 判断复选框是否被选中
if (inputs[i].checked) {
cks += inputs[i].value + ",";
}
}
}
console.log(cks);
// 截取字符串
cks = cks.substring(0,cks.length -1);
console.log(cks);
}
// 按照class获取元素
function testByClass() {
var cls = document.getElementsByClassName("para");
console.log(cls);
}
</script>
</html>
扫一扫
9992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
