如何让event.preventDefault在动态函数上工作

在动态函数上使用event.preventDefault()的方法有两种：

1. 使用事件委托：事件委托是将事件处理程序绑定到父元素上，然后通过事件冒泡机制来触发处理程序。这样可以确保动态添加的元素也能够触发事件。在事件处理程序中，可以使用event.target来获取触发事件的元素，并使用event.preventDefault()来阻止默认行为。

例如，如果你有一个父元素id为"parent"，其中包含多个子元素，其中一些是动态添加的，你可以使用以下代码来实现事件委托：

document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.classList.contains("dynamic-element")) {
    event.preventDefault();
    // 执行你的代码
  }
});

在上面的代码中，我们使用了classList.contains()方法来检查触发事件的元素是否具有"class"为"dynamic-element"的类名。如果是动态添加的元素，并且具有该类名，就会执行你的代码，并且阻止默认行为。

1. 使用事件代理：事件代理是将事件处理程序绑定到父元素上，然后通过事件对象的属性来判断触发事件的元素是否符合条件。如果符合条件，则执行相应的代码，并使用event.preventDefault()来阻止默认行为。

例如，如果你有一个父元素id为"parent"，其中包含多个子元素，其中一些是动态添加的，并且你想要在动态添加的元素上使用event.preventDefault()，你可以使用以下代码来实现事件代理：

document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.matches(".dynamic-element")) {
    event.preventDefault();
    // 执行你的代码
  }
});

在上面的代码中，我们使用了matches()方法来检查触发事件的元素是否与选择器".dynamic-element"匹配。如果是动态添加的元素，并且匹配该选择器，就会执行你的代码，并且阻止默认行为。

无论是事件委托还是事件代理，都可以让event.preventDefault()在动态函数上工作，并且适用于各种前端开发场景。