Question

我想创建一个JS函数，它可以从它调用的地方独立地处理它的参数。 AFAIK参数不同，具体取决于调用函数的位置。

示例1

通用用法是在HTML中注册函数：

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

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

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

示例2

另一种方法是，当文档加载完成后，动态注册它。这些方面的东西：

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

现在该函数将接收一个Event-Object而不是Element-Object。 我需要更改功能代码才能访问信息。

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

示例3

解决这个问题的一种方法是完全进入参数并始终收集函数内的所有信息，如下所示：

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

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

示例4？

我能想到的一个解决方案是更改 Solution 1 并将this打包到Event-Object中？我还没有尝试过这个，而且我不确定如何最优雅地做到这一点。

Ps：没有JQuery＆＃34;允许＆＃34;

Answer 1

这包括两种情况：

function foo(e) {
    let element = e.target || e;
}

Answer 2

第一个可以像这样重写（请注意，首选不要将标记与事件处理程序混合，但是如果你真的想要它，那么就可以这样写）

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

，第二个将从事件target属性中获取输入。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 3

你可以让你的函数检查参数的实例/类型，并将逻辑委托给其他函数。

function myGeneralFunction(arg) {
  if(arg instanceof Event) {
    return handerForEvents(arg);
  }
  return otherHandler(arg);
}

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

3 个答案: