深入了解JS

最新推荐文章于 2024-03-14 17:16:39 发布

慢热的生活

最新推荐文章于 2024-03-14 17:16:39 发布

阅读量138

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_64036990/article/details/121864634

版权

JS事件、Bom对象和Dom对象
主要内容
1. 事件
事件 (Event) 是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页
面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元
素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完
成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
1.1. 作用
1.2. 事件中的几个名词
例如
当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为
事件名称，即：click、mousemove、load 等都是事件名称，具体的执行代码处理，响应某个事件的函
数。
（1）验证用户输入的数据。
（2）增加页面的动感效果。
（3）增强用户的体验度
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办
闯红灯事件源:车 ; 事件名: 闯红灯; 监听：摄像头、交警 ;   处理:扣分罚款
单击按钮事件源:按钮; 事件名: 单击;   监听:窗口 ;       处理:执行函数
1.3. 事件类型
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
Window 事件属性：针对 window 对象触发的事件（应用到标签）
Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元
素中）
Keyboard 事件 : 键盘事件
Mouse 事件：由鼠标或类似用户动作触发的事件
Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介
元素中，比如、、、以及
）
几个常用的事件：
onclick 、onblur 、onfocus 、onload 、onchange
onmouseover、onmouseout、onkeyup、onkeydown
<body οnlοad="loadWindow();"></body>
<script>
function loadWindow(){
  alert("加载窗体");
}
</script>
onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
元素，那么这个click事件会按照如下顺序传播：
元素就会按下列顺序触发click事件：
1.4. 事件流和事件模型
我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元
素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到
该事件，这个传播过程称为DOM事件流。
事件顺序有两种类型：事件捕获和事件冒泡。
冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事
件流概念产生的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流是
事件捕获流。
1.4.1. 事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节
点（文档）。例如下面的：
如果点击了页面中的
1、
2、
3、
4、document
也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿
DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。
1.4.2. 事件捕获
Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事
件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还以
前面的例子为例。那么单击
1、document
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>

慢热的生活

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入了解JS

JS事件、Bom对象和Dom对象主要内容1. 事件事件 (Event) 是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
复制链接

扫一扫