如何在不使用 onclick 的情况下执行函数反应 - JavaScript

在 JavaScript 中，除了使用 onclick 属性来为 HTML 元素添加点击事件处理程序外，还有其他方式来执行函数。下面将介绍几种常见的方法来实现这个目标。

方法一：使用事件监听器

通过使用事件监听器，可以为特定的事件（例如点击事件）添加处理程序。可以使用 addEventListener 方法来添加事件监听器，该方法接受两个参数：要监听的事件名称和事件发生时要执行的函数。

// 获取要添加监听器的元素
const button = document.querySelector('#myButton');

// 添加点击事件监听器
button.addEventListener('click', myFunction);

// 点击事件的处理函数
function myFunction() {
  // 在这里编写需要执行的代码
}

方法二：使用事件委托

事件委托是一种将事件处理程序附加到父元素上，以便处理所有子元素的相同事件的技术。通过使用事件冒泡原理，可以捕获子元素上触发的事件，并通过判断事件目标元素来执行相应的处理程序。

// 获取父元素
const parentElement = document.querySelector('#parentElement');

// 添加点击事件处理程序
parentElement.addEventListener('click', myFunction);

// 点击事件的处理函数
function myFunction(event) {
  // 判断事件目标元素是否是你要执行处理程序的元素
  if (event.target.matches('#myElement')) {
    // 在这里编写需要执行的代码
  }
}

方法三：使用自执行函数

自执行函数（也称为立即执行函数）是一种在定义后立即执行的函数。可以将函数包装在一对括号中，并立即调用它。

// 定义并立即执行函数
(function() {
  // 在这里编写需要执行的代码
})();

方法四：使用定时器

定时器可以用来按照一定的时间间隔执行函数。可以使用 setTimeout 函数来设置定时器，并指定要执行的函数和延迟时间（以毫秒为单位）。

// 设置定时器
setTimeout(myFunction, 1000);

// 延迟执行的函数
function myFunction() {
  // 在这里编写需要执行的代码
}

以上是在 JavaScript 中在不使用 onclick 的情况下执行函数的几种方法。通过使用事件监听器、事件委托、自执行函数和定时器，可以实现更灵活和高效的事件处理。