JavaScript 事件

三季人 G

于 2023-01-28 11:45:00 发布

阅读量752

点赞数 3

分类专栏：网络 JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/QYgujingjing/article/details/128765418

版权

网络同时被 2 个专栏收录

86 篇文章 0 订阅

订阅专栏

84 篇文章 0 订阅

订阅专栏

JavaScript 事件

事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。在这篇文章中，我们将讨论一些关于事件的重要概念，并且观察它们在浏览器上如何运行。这篇文章不会面面俱到，仅聚焦于您现阶段需要掌握的知识。

一系列事件

就像上面提到的，事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制，比如在一个机场，当跑道清理完成，飞机可以起飞时，飞行员会收到一个信号，因此他们开始起飞。

在 Web 中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。举几个可能发生的不同事件：

用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭视频。
发生错误。

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

事件的三要素

事件源>事件类型>事件处理程序

事件源：事件被触发的对象，就是谁触发了这个事件
事件类型：如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下。
事件处理程序：通过一个函数赋值的方式完成

var btn = document,getElementById(“btn”)；
btn.onclick = function (){
}这就是一个最简单的事件

事件执行的步骤

1、获取事件源 2、注册事件（也叫绑定事件） 3、添加事件处理程序（一般用function函数）

操作元素

js的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容属性等

修改元素内容

element.Text和element.innerHTML element.innerText 从起始位置到终止位置的内容，但他去除了html标签同时空格和换行也会去掉不识别HTML标签非标准 element.innerHTML 起始位置到终止位置的全部内容，包括HTML标签，同时保留了空格和换行，识别HTML标签属于w3c标准，用的比较多这两个属性都是可读写的，可以获得元素里面的内容

修改元素属性

还是老的操作方法：先获取元素注册事件处理程序然后直接调用元素的属性赋值

DOM事件流

事件流(Event Flow)指的就是「网页元素接收事件的顺序」。事件流可以分成两种机制：

事件捕获(Event Capturing)
事件冒泡(Event Bubbling)

当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
接着就来分别介绍事件捕获和事件冒泡这两种机制。

事件捕获(Event Capturing)

在这里插入图片描述
事件捕获指的是「从启动事件的元素节点开始，逐层往下传递」，直到最下层节点，也就是div。

假设HTML 如下：

<html>
<head>
  <title>米淇淋是个大帅哥</title>
</head>
<body>

  <div>点我</div>

</body>
</html>

事件冒泡(Event Bubbling)

在这里插入图片描述
刚刚说过「事件捕获」机制是由上往下来传递，那么「事件冒泡」(Event Bubbling) 机制则正好相反。

假设HTML 同样如下：

<html>
<head>
  <title>米淇淋是个大帅哥</title>
</head>
<body>

  <div>点我</div>

</body>
</html>

一个简单的例子

让我们看一个简单的例子。前面您已经见到过很多事件和事件监听器，现在我们概括一下以巩固我们的知识。在接下来的例子中，我们的页面中只有一个 button，按下时，背景会变成随机的一种颜色。

<button>Change color</button>

JavaScript 代码如下所示：

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

我们使用 btn 变量存储 button，并使用了Document.querySelector() 函数。我们也定义了一个返回随机数字的函数。代码第三部分就是事件处理器。btn变量指向 button 元素，在 button 这种对象上可触发一系列的事件，因此也就可以使用事件处理器。我们通过将一个匿名函数（这个赋值函数包括生成随机色并赋值给背景色的代码）赋值给“点击”事件处理器参数，监听“点击”这个事件。

只要点击事件在元素上触发，该段代码就会被执行。即每当用户点击它时，都会运行此段代码。