事件介绍

您所在的位置:网站首页 js提交表单触发事件 事件介绍

事件介绍

2023-10-03 09:33| 来源: 网络整理| 查看: 265

你可能也会在代码中看到这种形式:

html

按下我

js

function bgChange() { const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`; document.body.style.backgroundColor = rndCol; }

在 web 上发现的最早的注册事件处理器的方法涉及到事件处理器 HTML 属性(或内联事件处理器),如示例所示。属性值就是你想在事件发生时运行的 JavaScript 代码。上面的示例调用了同一页面上 元素内定义的一个函数,但你也可以直接在属性内插入 JavaScript,比如说:

html

按下我

你可以找到许多事件处理器属性的 HTML 属性的等价表示;但是,你不应该使用这些属性——它们被认为是不好的做法。如果你正在做一些非常快速的事情,使用事件处理器属性可能看起来很容易,但它们很快就会变得无法管理和低效。

首先,把你的 HTML 和你的 JavaScript 混在一起不是一个好主意,因为它变得难以阅读。把你的 JavaScript 分开是一个好的做法,如果它在一个单独的文件中,你可以把它应用到多个 HTML 文档中。

即使在单个文件中,内联事件处理器也不是个好主意。一个按钮是可以的,但如果你有 100 个按钮呢?你必须在文件中添加 100 个属性;这将很快变成一个维护的噩梦。通过使用 JavaScript,你可以很容易地为页面上的所有按钮添加一个事件处理函数,不管有多少个,使用这样的方法:

js

const buttons = document.querySelectorAll("button"); for (const button of buttons) { button.addEventListener("click", bgChange); }

最后,作为一项安全措施,许多常见的服务器配置将禁止内联 JavaScript。

你永远不应该使用 HTML 事件处理器属性——那些已经过时了,使用它们是不好的做法。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3