如何将带this.id参数的内联onclick函数迁移到外部JS文件？

有几种简单的方法可以实现你要的效果，把元素id传递给外部的sortBy函数：

方法一：用匿名函数包裹调用（最直观） #

直接在事件监听的回调里获取当前元素的id，再传给sortBy：

document.getElementById("fileName").addEventListener('click', function() {
  sortBy(this.id);
});

如果习惯用箭头函数，就通过事件对象的currentTarget获取id：

document.getElementById("fileName").addEventListener('click', (event) => {
  sortBy(event.currentTarget.id);
});

这种方法的好处是不需要硬写id值，哪怕元素id后续有改动，代码也不用调整。

方法二：用bind预绑定参数 #

如果元素id是固定不变的，也可以用bind把id提前绑定到sortBy函数上：

document.getElementById("fileName").addEventListener('click', sortBy.bind(null, "fileName"));

这里bind的第一个参数是this指向（因为sortBy可能不需要用到特定的this，所以传null就行），第二个参数就是要传给sortBy的id值。

注意事项 #

别忘了把原HTML里的onclick="sortBy(this.id)"删掉，避免同一个点击事件触发两次逻辑。

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