为什么当我点击链接时我的 JavaScript 函数没有被触发？

点击链接时未触发 JavaScript 函数

问题

在 HTML 页面中，侧边栏导航中的链接旨在更新 src 属性包含内容的 iFrame。尽管使用了正确的代码，但单击链接时 JavaScript 函数并未执行。

错误

忘记通过添加括号来调用 JavaScript 函数是问题的主要原因。此外，还有一些建议遵循的做法：

最佳实践

1. 避免内联 HTML 事件属性（onclick、onmouseover 等）：

   • 创建可读性和调试都很差的意大利面条代码
   • 导致代码重复并降低可扩展性。
   • 违反了关注点分离开发原则。
   • 干扰回调函数中的 this 绑定。

2. 使用事件监听器(addEventListener()):

   • 允许简洁高效的事件处理。
   • 分离 HTML 和 JavaScript，提高代码可读性和可维护性。
   • 提供处理多个事件的有效方法

3. 使用链接进行事件处理时禁用超链接导航:

   • 将 href 属性设置为 # “”以阻止浏览器的默认导航行为。

修订后的代码

<button></button>

// Add parentheses to invoke the function on link click
function getContent() {
  iFrame.src = "LoremIpsum.html";
  console.log("Source updated!");
}

// Set up event listener for the button
btn.addEventListener("click", getContent);

以上是为什么当我点击链接时我的 JavaScript 函数没有被触发？的详细内容。更多信息请关注PHP中文网其他相关文章！