动态添加 onclick javascript - Javascript (1)

📌 相关文章

📜 动态添加 onclick javascript - Javascript (1)

📅 最后修改于: 2023-12-03 15:22:47.014000 🧑 作者: Mango

动态添加 onclick javascript - Javascript

在 Javascript 中，onclick 属性可以添加一个点击事件，但是如果我们想要在代码中动态添加 onclick，该怎么办呢？本文将介绍如何在 Javascript 中动态添加 onclick。

首先，我们需要获取要添加 onclick 的元素。可以使用 getElementById 方法获取元素。

const element = document.getElementById('myButton');

这里以一个按钮为例，其 id 为 myButton。

接着，我们需要将一个函数作为参数传递给 onclick 属性。有以下两种方式：

1. 直接在 HTML 中添加函数

像这样，将函数 myFunction 直接添加到 HTML 中的 onclick 属性里：

<button onclick="myFunction()">点击我</button>

在 Javascript 中动态添加 onclick，就可以使用类似的方法。也就是将函数添加到 onclick 属性中。

2. 使用 Javascript 动态添加函数

将一个函数添加到 onclick 属性，可以使用 addEventListener 或 attachEvent（IE8 及更早版本）方法。我们以添加函数到按钮的 onclick 事件为例：

element.addEventListener('click', myFunction);

myFunction 是要添加的函数名。

完整代码

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
function myFunction() {
  alert("Hello World!");
}

const element = document.getElementById('myButton');
element.addEventListener('click', myFunction);
</script>

</body>
</html>

以上就是动态添加 onclick javascript 的方法。希望能为你提供帮助。