本文深入探讨JavaScript事件的基础知识，包括事件监听、处理和常见事件类型，同时解析BOM和DOM对象的关键概念与操作，如窗口对话框、时间函数、历史记录管理、位置控制、节点获取与创建、节点插入与删除。
JS事件、Bom对象和Dom对象
JS事件
事件 (Event) 是 JavaScript 应⽤跳动的⼼脏 ，进⾏交互，使⽹⻚动起来。
通过使⽤ JavaScript ，你可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应。
作⽤
（1）验证⽤户输⼊的数据。
（2）增加⻚⾯的动感效果。
（3）增强⽤户的体验度
事件中的⼏个名词
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发⽣了怎么办
⽤户在⻚⾯中进⾏的点击动作，⿏标移动的动作，⽹⻚⻚⾯加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load 等都是事件名称，具体的执⾏代码处理，响应某个事件的函数。
<body onload="loadWindow();"></body> <script>
function loadWindow(){
alert("加载窗体");
}
</script>
事件类型
JavaScript可以处理的事件类型为：⿏标事件、键盘事件、HTML事件
Window 事件属性：针对 window 对象触发的事件（应⽤到 标签）
Form 事件：由 HTML 表单内的动作触发的事件（应⽤到⼏乎所有 HTML 元素，但最常⽤在 form 元素中）
Keyboard 事件 : 键盘事件
Mouse 事件：由⿏标或类似⽤户动作触发的事件
Media 事件：由媒介（⽐如视频、图像和⾳频）触发的事件（适⽤于所有 HTML 元素，但常⻅于媒介元素中)
⼏个常⽤的事件：
onload：当⻚⾯或图像加载完后⽴即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：⿏标点击某个对象
onchange：⽤户改变域的内容
onmouseover：⿏标移动到某个元素上
onmouseout：⿏标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
事件流和事件模型
事件顺序有两种类型：事件捕获 和 事件冒泡。
（事件流：是指⻚⾯接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流
是事件捕获流。
事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（⽂档）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
click 事件⾸先在 div 元素上发⽣，⽽这个元素就是我们单击的元素。然后，click 事件沿
DOM 树向上传播，在每⼀级节点上都会发⽣，直到传播到document对象。
事件捕获
Netscape提出的另⼀种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，⽽最具体的节点应该最后接收到事件。事件捕获的⽤意在于在事件到达预定⽬标之前捕获它。
在事件捕获过程中，document 对象⾸先接收到 click 事件，然后沿DOM树依次向下，⼀直传播到事件的实际⽬标，即
DOM 事件流
“DOM2级事件”规定的事件流包括三个阶段：
事件捕获阶段、
处于⽬标阶段、
事件冒泡阶段。
⾸先发⽣的是事件捕获阶段，为截获事件提供了机会。
然后是实际的⽬标接收到事件。
最后⼀个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
事件处理程序
事件处理程序的名字以“on”开头，因此 click 事件的事件处理程序就是 onclick，为事件指定处理程序的⽅式有好⼏种。
HTML 事件处理程序
html处理程序
特点：与元素耦合度太高
<标签名 onclick = “函数”></标签名>
DOM0 级事件处理程序
特点：只能为同一个元素的同一个事件设定多个处理程序（覆盖）
1.获取事件源
var 事件源 = document.getElementById(“事件源的id属性值”);
2.绑定事件
事件源.onmouseout = function(){
…
}
DOM2 级事件处理程序
特点：可以为同一个元素绑定多个事件
方法
addEventListener
1.获取事件源
var 事件源 = document.getElementById(“事件源的id属性值”);
2.绑定事件
事件源.addEventListener(‘click’,function(){
…处理代码
});
或
function test(){
…处理代码
}
2.绑定事件
事件源.addEventListener(‘click’,test);
removeEventListener
1.获取事件源
var 事件源 = document.getElementById(“事件源的id属性值”);
2.移除监听的事件
事件源.removeEventListener(‘click’,函数名);
Bom对象
BOM的核⼼对象是window，它表示浏览器的⼀个实例。
Window对象⽅法
系统对话框
（1）消息框:alert， 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
<button type="button" onclick="fun1()">消息框</button>
<button type="button" onclick="fun2()">输入框</button>
<button type="button" onclick="fun3()">删除数据</button>
<script type="text/javascript">
//消息框
function fun1(){
alert("普通消息框");
}
//输入框
function fun2(){
var str = prompt("请输入账号名称","leader");
if(str == "admin"){
alert("欢迎超级VIP用户");
}else{
alert("欢迎"+str);
}
}
//确认框
function fun3(){
var str = confirm("确认删除这条数据吗");
if(str == true){
alert("删除成功");
}else{
alert("取消成功");
}
}
</script>
打开窗⼝
打开窗口
window.open(); 打开空窗口
window.open(地址); 打开网页，可以是在线地址或本地地址
<button type="button" onclick="fun1()">打开空窗口</button>
<button type="button" onclick="fun2()">打开本地资源</button>
<button type="button" onclick="fun3()">打开百度</button>
<button type="button" onclick="fun4()">打开关闭窗口的页面</button>
<script type="text/javascript">
function fun1(){
//打开空窗口
window.open();
}
function fun2(){
//打开本地资源
window.open("01-系统对话框.html");
}
function fun3(){
//打开百度
window.open("http://www.baidu.com");
}
function fun4(){
window.open("03-关闭窗口.html");
}
</script>
关闭窗⼝
window.close(); 关闭当前窗口
<button type="button" onclick="fun1()">关闭当前窗口</button>
<script type="text/javascript">
function fun1(){
window.close();
}
</script>
时间函数
setTimeout
在指定毫秒数之后执行某个函数 返回唯一标识 方便关闭
var id = setTimeout(函数名,毫秒数);
setInterval
以指定毫秒数为周期，循环执行 返回唯一标识 方便关闭
var id = setInteval(函数名,毫秒数);
清除时间函数
clearInterval(id);
<button type="button" onclick="startTime()">开始</button>
<button type="button" onclick="closeTime()">关闭</button>
<h1 id="h1" style=""></h1>
<script type="text/javascript">
//在指定毫秒数之后执行某个函数
// setTimeout(fun1,5000);
// function fun1(){
// console.log("卢本伟");
// }
//以指定毫秒数为周期，循环执行
// setInterval(fun2,2000);
// function fun2(){
// console.log("PDD");
// }
//写出北京时间
function writeTime(){
//创建时间对象
var date = new Date();
//格式化时间
var newTime = forMatTime(date);
//获取标题标签
var tit = document.getElementById("h1");
//设置标题标签的内容
if(date.getSeconds() == 0){
tit.style.color = "red";
tit.innerHTML = newTime;
}else{
tit.style.color = "black";
tit.innerHTML = newTime;
}
}
//开启循环写出时间函数
var id;
function startTime(){
//循环执行写出的方法
id = setInterval(writeTime,1000);
}
//关闭时间的函数
function closeTime(){
//清除时间函数
clearInterval(id);
}
//格式化时间
function forMatTime(date){
//获取年月日
var year = date.getFullYear();
console.log(year);
var month = (date.getMonth()+1) < 10 ? "0" + (date.getMonth()+1) : (date.getMonth()+1);
console.log(month);
var dat = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
console.log(dat);
//时分秒
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
console.log(hour);
var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
console.log(minute);
var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
console.log(second);
var str = year +'-'+ month +'-'+ dat +" "+ hour +':'+ minute +':'+ second;
console.log(str);
return str;
}
</script>
history对象
history
history对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
属性 : length
<h1>页面1</h1>
<a href="05-history对象2.html">跳转到2页面</a>
<script type="text/javascript">
console.log(history.length);
</script>
<h1>页面2</h1>
<a href="05-history对象3.html">跳转到2页面</a>
<a href="javascript:window.history.back()">后退1个</a>
<a href="javascript:window.history.forward()">前进1个</a>
<script type="text/javascript">
console.log(window.history.length);
</script>
<h1>页面3</h1>
<a href="javascript:window.history.back()">后退1个</a>
<a href="javascript:window.history.go(-2)">后退2个</a>
<a href="javascript:test()">触发事件</a>
<script type="text/javascript">
console.log(history.length);
function test(){
console.log("abc");
}
</script>
location对象
location
属性
window.location.href; 获取当前网页的地址
window.location.href = “地址”; 跳转
方法
reload 重新加载页面
replace 选择一个页面替换当前页面
<button type="button" onclick="fun1()">跳转</button>
<button type="button" onclick="fun2()">刷新页面</button>
<button type="button" onclick="fun3()">替换页面</button>
<script type="text/javascript">
console.log(window.location.href);
function fun1(){
window.location.href = "01-系统对话框.html";
}
function fun2(){
window.location.reload();
}
function fun3(){
window.location.replace("http://www.baidu.com");
}
</script>
Dom对象
DOM：Document Object Model ⽂档对象模型
获取节点
处理⽅式两种:
（1）把 script 调⽤标签移到html末尾即可；
（2）使⽤onload事件来处理JS，等待html 加载完毕再加载 onload 事件⾥的 JS。
window.onload = function () { //预加载 html 后执⾏};
getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值
<p id="p1" class="para">这是一个段落<span>文本</span></p>
<p id="p1" class="para">这又是一个段落</p>
<input type="text" class="para" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:void(0)" onclick="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>
<script type="text/javascript">
//getElementById()
function testById(){
var p = document.getElementById("p1");
console.log(p);
}
//根据标签名获取dom对象数组
function testByName(){
var hobbys = document.getElementsByName("hobby");
console.log(hobbys);
}
//根据样式名获取dom对象数组
function testByTagName(){
var inpts = document.getElementsByTagName("input");
console.log(inpts);
}
function testByClass(){
var prs = document.getElementsByClassName("para");
console.log(prs);
}
</script>
创建节点和插⼊节点
创建节点的方法
createElement()创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()创建一个文本节点，可以传入文本内容
innerHTML也能达到创建节点的效果，直接添加到指定位置了
插入节点
write()将任意的字符串插入到文档中
appendChild()向元素中添加新的子节点，作为最后一个子节点
insertBefore()向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点 需要参考父节点
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<p id="newP">块级元素1</p>
<select name="music">
<option value="-1">你心内的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜欢你</option>
</select>
<hr />
<span id="newSpan">行内元素2</span>
<div id = "container">
</div>
<script type="text/javascript">
//获取添加的位置
var div = document.getElementById("container");
//添加段落
function addPara(){
//方式一
//创建新的段落
// var newP = document.createElement("p");
//创建一个文本节点
// var newText = document.createTextNode("段落块级元素");
//将文本追加到元素中
// newP.appendChild(newText);
//将元素添加到指定位置
// div.appendChild(newP);
//方式二
//创建新的段落
// var newP = document.createElement("p");
//给元素设置内容
// newP.innerHTML = "新的节点";
//将元素添加到指定位置
// div.appendChild(newP);
//方式三
var str = "<p>new段落</p>";
div.innerHTML += str;
}
//添加图片
function addImg(){
//方式一
//创建图片节点
// var img = document.createElement("img");
//设置属性
// img.src = "img/lbw.jpg";
// img.width = "200";
// img.height = "200";
// img.title = "卢本伟";
// div.appendChild(img);
//方式二
//创建图片节点
// var img = document.createElement("img");
// img.setAttribute("src","img/lbw.jpg");
// img.setAttribute("width","200");
// img.setAttribute("height","200");
// div.appendChild(img);
//方式三
var str = "<img src='img/lbw.jpg' width=200px height=200px />";
div.innerHTML += str;
}
//添加文本框
function addTxt(){
//创建节点
// var inp = document.createElement("input");
// inp.type = "text";
// inp.placeholder = "提示语";
// div.appendChild(inp);
//创建节点
// var inp = document.createElement("input");
// inp.setAttribute("type","text");
// inp.setAttribute("value","PDD");
// div.appendChild(inp);
}
//添加选项
function addOptions(){
//获取下拉框节点
var sel = document.getElementsByName("music")[0];
var str = prompt("请输入歌名");
//方式一
//创建节点
// var op = document.createElement("option");
//创建节点对象
// var text = document.createTextNode(str);
// op.appendChild(text);
// op.value = "2";
// console.log(op);
//追加到指定位置
// sel.appendChild(op);
//方式二
// var op = new Option();
// op.value = "2";
// op.innerHTML = str;
// var text = document.createTextNode(str);
// op.appendChild(text);
// sel.appendChild(op);
// 方式三
//获取下拉框所有的选项
var ops = sel.options;
//创建节点
var op = new Option();
op.value = "2";
op.innerHTML = str;//设置内容
ops.add(op);
//选中项索引
var index = ops.selectedIndex;
//获取选中项的值
console.log(ops[index].value);
console.log(ops[index].text);
console.log(sel.value+"=========");
}
// document.write("文本");
//insertBefore
var newP = document.getElementById("newP");
var newSpan = document.getElementById("newSpan");
//获取参考父节点
var bo = newSpan.parentElement;
console.log(bo);
bo.insertBefore(newSpan,newP);
</script>
间接查找节点
childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
<div id="mydiv">
这是第一个DIV
<span>span元素</span><div>div元素</div><p>p元素</p>
</div>
<script type="text/javascript">
//返回元素的一个子节点的数组
var div = document.getElementById("mydiv");
console.log(div.childNodes);
//返回元素的一个子节点的数组
console.log(div.firstChild);
//返回元素的最后一个子节点
console.log(div.lastChild);
// 返回元素的下一个兄弟节点
var span = document.getElementsByTagName("span")[0];
console.log(span.nextSibling);
//parentNode
console.log(span.parentNode);
//返回元素的上一个兄弟节点
console.log(span.previousSibling);
</script>
删除节点
删除节点
removeChild(); 先找到父节点 操作删除
需要被删除的子节点.parentElement.removeChild(需要被删除的子节点);
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="delNode();">删除</a>
<script type="text/javascript">
function delNode(){
//获取需要被删除的节点对象
var pro = document.getElementById("programmer");
pro.parentElement.removeChild(pro);
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
