为何直接return event.target.value.replace()无法修改输入框值？

我的代码可正常运行，但我很好奇背后的原理，我猜测这和内存引用有关，但始终没有找到明确答案。
背景需求：用户每次输入时自动处理手机号输入框的值，移除字符串里所有非数字内容。
可以正常生效的代码如下：

const phoneInput = document.querySelector('.phoneInput')
phoneInput.addEventListener('input', function(event) {
  const trimedValue = event.target.value.replace(/\D/g, '')
  return event.target.value = trimedValue
})

我的疑问是，为什么下面这种写法完全不起作用？

const phoneInput = document.querySelector('.phoneInput')
phoneInput.addEventListener('input', function(event) {
  return event.target.value.replace(/\D/g, '')
})

两个基础知识点没搞清楚：

• JavaScript里字符串是不可变的原始值，String.prototype.replace()方法不会修改原字符串本身，只会返回一个处理完成的全新字符串
• 给DOM绑定的input事件监听器，它的返回值没有任何实际意义，浏览器不会自动用你返回的内容去更新输入框的值

失效版本的代码里，event.target.value.replace(/\D/g, '')确实计算出了去掉非数字的正确结果，但你只是把这个新字符串作为回调函数的返回值返回了，既没有手动把这个新值赋值回输入框的value属性，浏览器也不会自动帮你做赋值操作，输入框内容自然不会变化。

而能正常运行的版本，真正起作用的是event.target.value = trimedValue这行赋值操作，前面的return完全是多余的——哪怕你删掉return，只要执行了这行赋值，功能就完全正常，简化后的写法和你原来的生效代码效果完全一致：

const phoneInput = document.querySelector('.phoneInput')
phoneInput.addEventListener('input', function(event) {
  event.target.value = event.target.value.replace(/\D/g, '')
})

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