事件处理程序
事件处理程序
Event handlers can be used to handle and verify user input, user actions, and browser actions : Things that should be done every time a page loads. Things that should be done when the page is closed. Action that should be performed when a user clicks a button.
事件处理程序作为 HTML 标记的属性嵌入到文档中，您可以将 JavaScript 代码分配给这些标记以执行。一般语法是
<TAG eventHandler=”JavaScript Code”>
其中 TAG 是一些 HTML 标签和 事件处理程序 是事件处理程序的名称。
例如，假设您创建了一个 JavaScript 函数，名为 计算 .当用户单击按钮时，您可以通过将函数调用分配给按钮的 点击 事件处理程序：
有许多不同类型的事件可能发生。
例如：
- 用户选择、单击或将光标悬停在某个元素上。
- 用户选择键盘上的一个键。
- 用户调整或关闭浏览器窗口。
- 一个网页完成加载。
- 提交了一个表格。
- 播放、暂停或结束视频。
- 发生错误。
要对事件做出反应，您需要为其附加一个事件处理程序。这是在事件触发时运行的代码块（通常是您作为程序员创建的 JavaScript 函数）。当这样的代码块被定义为响应事件而运行时，我们说我们正在注册一个事件处理程序。注意：有时会调用事件处理程序 ** 事件监听器** ——就我们的目的而言，它们几乎可以互换，尽管严格来说，它们是一起工作的。 侦听器侦听事件的发生，处理程序是响应事件发生而运行的代码。
const btn = document.querySelector('button');
函数随机（数字）{
返回 Math.floor(Math.random() * (number+1));
}btn.addEventListener('click', () => {
const rndCol =rgb(${random(255)}, ${random(255)}, ${random(255)});
document.body.style.backgroundColor = rndCol;
});
在这段代码中，我们存储了对 <button> 常量内的元素称为 btn ， 使用 Document.querySelector() 功能。
HTML 事件处理程序属性
使用 HTML 事件处理程序属性分配事件处理程序被认为是不好的做法，应尽可能避免，原因如下：
首先，事件处理程序代码与 HTML 代码混合在一起，这将使代码更难维护和扩展。
二是时间问题。如果元素在 JavaScript 代码之前完全加载，用户可以开始与网页上的元素交互，这将导致错误。
例如，假设以下 显示警报（） 函数在外部 JavaScript 文件中定义：
** <input type="button" value="Save" onclick="showAlert()">** 代码语言：HTML、XML
当页面完全加载且 JavaScript 尚未加载时， 显示警报（） 功能未定义。如果用户此时单击该按钮，则会发生错误。
DOM 0 级事件处理程序
每个元素都有事件处理程序属性，例如 点击 .要分配事件处理程序，请将属性设置为函数，如示例所示：
让 btn = document.querySelector('#btn');
btn.onclick = 函数（） { alert('点击了！'); };代码语言：JavaScript
在这种情况下，匿名函数成为 按钮 元素。因此， 这个 value 等价于元素。您可以在事件处理程序中访问元素的属性：
让 btn = document.querySelector('#btn');
btn.onclick = 函数（） { 警报（this.id）； };代码语言：JavaScript
输出：
btn
通过使用 这个 在事件处理程序中，您可以访问元素的属性和方法。
要删除事件处理程序，请将事件处理程序属性的值设置为 无效的 ：
btn.onclick = null;代码语言：JavaScript
由于其简单性和跨浏览器支持，DOM Level 0 事件处理程序仍然被广泛使用。
DOM 2 级事件处理程序
DOM Level 2 Event Handlers 提供了两种主要的方法来处理注册/注销事件监听器：
添加事件监听器（）– 注册一个事件处理程序移除事件监听器（）– 删除一个事件处理程序
概括
- 分配事件处理程序有三种方法：HTML 事件处理程序属性、元素的事件处理程序属性和
添加事件监听器（）. - 应避免通过 HTML 事件处理程序属性分配事件处理程序。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
