HTML onclick 按钮

在 HTML 中，我们有一个按钮用于将用户请求数据提交到服务器（后端）以验证和导航网页。主要是，如果我们使用 onclick 按钮作为事件属性，并且所有浏览器都支持，那么无论我们在脚本中使用此事件函数，浏览器兼容性功能也是如此。当用户单击时，该事件就会出现。标签，会用到，需要在中添加onclick事件元素。然后，当用户端调用或单击按钮时，按钮标签将在脚本上运行。它在具有 onclick 属性的 HTML 对象中的特定代码行上运行。

onclick 按钮的工作原理

主要用于在用户需要点击按钮的地方触发并调用该函数。如果用户通过单击鼠标， Onclick 事件中的元素，它会调用 Javascript 等函数。…onclick 事件属性基本上只包含一个在事件后端运行的脚本的值。

语法：

<button name="" value="" onclick> ="function()"/></button>

以上语法是html属性中onclick事件的基本用法。我们还根据用户需求定制了活动。

HTML onclick 按钮示例

下面给出了 html 中 onclick 按钮的示例：

示例#1

代码：

<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

输出：

在上面的例子中，我们创建了javascript函数；此外，当用户单击“click”按钮时，浏览器本身会显示“Welcome”值。

示例#2

代码：

<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

输出：

上面的示例也与我们在前面的示例 1 中讨论的相同，但是这里我们没有使用任何 。标签，而不是我们直接调用

中的函数和事件。标签（段落）标签。这样会减少代码行数。

示例 #3

代码：

Username: <input type="text" id="user" value="sivaraman"><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>

 输出：

在上面的示例中，我们在选择自动从用户名复制到密码的“单击”按钮后，调用 JavaScript 函数将值从用户名复制到密码。这是onclick事件的基本操作之一。

各种事件中的OnClick事件

• 其他一些事件使用的onclick属性属性，例如全局事件处理程序，也是Event handler下的事件处理机制之一，用于处理HTML Elements中的点击事件。每当用户请求后引发单击事件时，它都会按某种顺序在鼠标按下和鼠标松开事件之后触发。
• 点击事件也有一些触发动作；考虑将相同的操作添加到“key-down”事件中，允许不使用鼠标指针甚至触摸屏的用户使用相同的操作。我们在 javascript 中有一些用于 onclick 事件的内置函数。
• 如果函数接收 MouseEvent 对象作为其唯一参数，则该函数也将是要触发的事件的元素。一次只会为单个对象分配一个单击事件处理程序。如果你使用EventTarget.addEventListener()方法，因为它更灵活。

例如，如果我们想在单击后更改给定值的颜色。

<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>

输出：

• 在上面的示例中，我们只是调用了单击事件来更改用户屏幕上的文本颜色。与许多事件触发函数一样，它对于运行时说明书以及用户需求可能很有用。
• Onclick事件也是图片对象的一个​​属性；此外，它还包含一个表达式，当用户单击按钮或图片对象时会计算该表达式。 onclick 事件还会根据用户要单击图像的哪一部分执行一些不同的操作。一般来说，处理程序可以在 等 html 属性中设置。当用户使用鼠标光标单击时，onclick 中的代码将运行，html 属性名称不区分大小写，因此 onclick 的作用与 onClick 相同，但通常，属性使用小写。
• 如果我们使用表单标签访问网页，当我们按下移动按钮时，控制器可以在后端逻辑中验证用户需求并显示结果视图。它还会重新加载网页；有时 onclick 事件在 javascript 验证中不起作用，即在 html 页面中调用 onclick 事件中的函数时，用户必须进行检查，并且如果函数 onclick() 定义在中，则重命名该函数此时不起作用用户输入或点赞按钮比 JavaScript 函数具有更高的优先级。

这里有一些对在 html 标签中使用 onclick 事件有帮助的建议。

1.不要使用 onclick=”javascript:function()”，仅在属性内使用 javascript : like 前缀，如 href 超链接：

2.我们不会像 onclick=”function()” 和 onclick=”function();” 这样以分号结尾两者都可以正常工作，但是使用分号作为函数结束并不是一个好的做法。

3.像 onclick、onCLICK 和 ONCLICK 这样的事件属性都可以工作，但是在通常的实践中，我们将属性写成小写，甚至 javascript 本身也区分大小写，当我们写成 document.getElementById().onclick=” 时，那么所有属性都必须是小写。

结论

onclick也是javascript函数中的事件触发器；它可能有助于用户验证和浏览网页。在jquery中，我们也使用onclick事件作为用户自定义需求的主要部分。像，react js，Angular 是我们在 onclick 函数中使用的其他一些框架。它还支持现在大多数现代浏览器，如 google chrome、Mozilla Firefox 和 safari 等。在 javascript 中，我们不仅可以处理 onclick 事件函数，还可以用于其他一些属性，例如“on select,onsubmit, toggle,onkeyup”等.根据用户需求，我们可以在html中使用事件属性。

以上是HTML onclick 按钮的详细内容。更多信息请关注PHP中文网其他相关文章！