javascript - 具有通用参数处理的回调函数

Question

我想创建一个 JS 函数，它独立于调用它的位置来处理其参数。AFAIK 参数有所不同，具体取决于调用函数的位置。

示例 1

常见的用法是在 HTML 中注册该函数:

<input type="text" id="text1" onkeyup="myFunc(this);">

然后该元素将被传递给函数:

function myfunc(element) {
    alert(element.value);
}

示例 2

另一个，appoach是在文档加载完成时动态注册它。类似的事情:

// init() gets called when document is ready
function init() {
    document.getElementById('text2').addEventListener('keyup', myFunc2);
}

现在该函数将接收事件对象而不是元素对象。我需要更改功能代码才能访问信息。

function myFunc2(event) {
    var element = event.target;
    alert(element.value);
}

示例3

解决此问题的一种方法是完全忽略参数并始终收集函数内的所有信息，如下所示:

function myFunc3(event) {
    var element = document.getElementById('text3');
    alert(element.value);
}

这个解决方案的丑陋之处在于，GUI 将与逻辑紧密耦合。

示例 4？

我能想到的一个解决方案是更改解决方案1并将this打包到事件对象中？我还没有尝试过这个，我不知道如何最优雅地做到这一点。

Ps:“不允许”使用 JQuery

Answer 1

第一个可以像这样重写(请注意，最好不要将标记与事件处理程序混合，但是如果您确实想要它，那么可以这样编写)

<input type="text" id="text1" onkeyup="myFunc(event);">

第二个将从 events target 属性获取输入。

function myFunc(e) {
  let element = e.target;
  console.log( 'event comming from ' + element.id );
  console.log( 'current value is ' + element.value );
}

window.addEventListener('load', function() {
  let el = document.querySelector('#text2');
  el.addEventListener('keyup', myFunc);
});

<input type="text" id="text1" onkeyup="myFunc(event);">
<input type="text" id="text2">