JavaScript无法外部绑定事件监听器：事件仅触发一次或完全不触发

问题根因 #

你当前所有事件绑定写法的问题都出在回调函数的传递逻辑上：直接书写boldLink("link-1")会让代码运行到绑定逻辑时立即执行该函数，而非将函数作为回调留到事件触发时再调用，这就是为什么未触发事件就先执行了一次、后续事件触发无反应的核心原因，和脚本放置位置、事件类型无关。

正确写法参考 #

原生JavaScript写法

1. addEventListener绑定（推荐）
   用匿名函数/箭头函数包裹你的实际调用逻辑即可：

document.getElementById('link-1').addEventListener('mouseover', () => {
  boldLink('link-1')
})

2. onmouseover属性绑定
   注意onmouseover是DOM元素的属性，需要赋值函数，而非直接调用：

document.getElementById('link-1').onmouseover = () => boldLink('link-1')

jQuery写法

注意id选择器需要加#前缀，原写法$('link-1')无法匹配到id为link-1的元素：

$('#link-1').on('mouseover', function() {
  boldLink("link-1")
})

批量绑定优化方案 #

如果有多个链接需要绑定相同逻辑，可以给对应元素统一加类名（如class="bold-link"），一次性绑定所有元素，避免重复代码：

document.querySelectorAll('.bold-link').forEach(link => {
  link.addEventListener('mouseover', () => boldLink(link.id))
})

内容的提问来源于stack exchange，提问作者tacitoak82