JS事件、Bom对象和Dom对象

最新推荐文章于 2025-06-03 18:54:56 发布

Trycol

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量187

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44454512/article/details/109659672

版权

JS事件、Bom对象和Dom对象

1.事件

事件 (Event) 是 JavaScript 应⽤跳动的⼼脏，进⾏交互，使⽹⻚动起来。当我们与浏览器中 Web ⻚⾯
进⾏某些类型的交互时，事件就发⽣了。事件可能是⽤户在某些内容上的点击、⿏标经过某个特定元素
或按下键盘上的某些按键。事件还可能是 Web 浏览器中发⽣的事情，⽐如说某个 Web ⻚⾯加载完成，
或者是⽤户滚动窗⼝或改变窗⼝⼤⼩。
通过使⽤ JavaScript ，你可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应。
1.1. 作⽤
1.2. 事件中的⼏个名词
（1）验证⽤户输⼊的数据。
（2）增加⻚⾯的动感效果。
（3）增强⽤户的体验度
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发⽣了怎么办
1.3. 事件类型
JavaScript可以处理的事件类型为：⿏标事件、键盘事件、HTML事件。
⼏个常⽤的事件：
onload：当⻚⾯或图像加载完后⽴即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：⿏标点击某个对象
onchange：⽤户改变域的内容
onmouseover：⿏标移动到某个元素上
onmouseout：⿏标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下

2. BOM对象

BOM的核⼼对象是window，它表示浏览器的⼀个实例。window对象有双重⻆⾊，它既是通过
JavaScript访问浏览器窗⼝的⼀个接⼝，⼜是ECMAScript规定的Global对象。这意味着在⽹⻚中定义的任
何⼀个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等⽅法。如果⻚⾯中
包含框架，则每个框架都拥有⾃⼰的window对象，并且保存在frames集合中。在frames集合中，可以通
过数值索引（从0开始，从左⾄右，从上到下）或者框架的名称来访问相应的window对象。
2.1. Window对象⽅法
2.1.1. 系统对话框
浏览器通过（实际是window对象的⽅法）alert()、confirm()、prompt()⽅法可以调⽤系统对话框向⽤户
显示消息。
（1）消息框:alert，常⽤。
alert() ⽅法⽤于显示带有⼀条指定消息和⼀个 OK 按钮的警告框。
（2）输⼊框:prompt，返回提示框中的值。
prompt() ⽅法⽤于显示可提示⽤户进⾏输⼊的对话框。
参数（可选）：
第⼀个参数：要在对话框中显示的纯⽂本。
第⼆个参数：默认的输⼊⽂本。
（3）确认框:confirm，返回 true/false.
confirm() ⽅法⽤于显示⼀个带有指定消息和 OK 及取消按钮的对话框。

<style type="text/css">
 #aa{
 border: 1px solid red;
 height: 100px;
 }
</style>
<body>
 <div id="aa">
 This is a div
 </div>
 <button onclick="testAlert();">警告</button>
 <button onclick="testComfirm();">修改</button>
 <button onclick="testPrompt();">输⼊</button>
 <script type="text/javascript">
 // 1.警告框
 function testAlert(){
 alert('警告框！！！');
 }

 /*
 2.输⼊框
 返回值：输⼊的内容
 * */
 function testPrompt(){
 var item = prompt('请输⼊年龄'); // item得到输⼊的值
 // console.log(item)
 // alert(prompt('请输⼊年龄',18)); // 将输⼊的值输出
 }

 /*
 3.确认框
 返回值：boolean（true|false）
 * */
 function testComfirm(){
 var result = confirm('真的要改吗？');
 if(result){
 var ele = document.getElementById("aa");
 ele.style.color="red";
 ele.innerHTML="<span>fdsfsd</span>";
 }else{
 alert("没事别瞎点。。。");
 }
 }
 </script>
</body>

3. DOM对象

DOM：Document Object Model ⽂档对象模型
要实现⻚⾯的动态交互效果，bom 操作远远不够，需要操作 html 才是核⼼。如何操作 html，就是
DOM。简单的说，dom 提供了⽤程序动态控制 html 接⼝。DOM即⽂档对象模型描绘了⼀个层次化的节
点树，运⾏开发⼈员添加、移除和修改⻚⾯的某⼀部分。dom 处于javascript 的核⼼地位上。
每个载⼊浏览器的 HTML ⽂档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML
⻚⾯中的所有元素进⾏访问。Document 对象是 Window 对象的⼀部分，可通过 window.document 属性
对其进⾏访问。