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

我想创建一个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); 
}

现在，该函数将收到一个事件对象，而不是一个Element-对象。 我需要更改函数代码来访问信息。

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

例3

一个解决这个问题的方法是完全ingnore论点，总是聚集在函数内部的所有信息，如：

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

丑陋件事这个解决方案是，GUI将被巧妙地耦合到逻辑。

例4？

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

PS：不JQuery的“允许”

来源

2017-09-14 Boris Däppen

忘掉解决方案1，因为在HTML代码中直接绑定事件是一个不好的做法和做事的一种常见方式初学者。解决方案3笨拙，并会在每次按键时进行DOM调用（'element = document.getElementById（'text3'）'），这可能非常耗费资源。解决方案2看起来不错，你可以获得所有需要传递的信息。你用'element = event.target'获得你的元素，你自己做了。它出什么问题了？ –

您也可以从内联处理程序传递事件对象：'onclick =“myFunc（event）;”'。尽管我同意Jeremy的观点，但内联处理程序是不好的做法。 – Teemu

这实际上是我正在寻找的解决方案'onclick =“myFunc（event）;''。我问的原因是纯粹的教育（我正在向初学者教这些东西）。他们有时需要先学习**例1 **，尽管它被认为是不好的。所以我在寻找从例子1 **到例子2 **的平滑过渡。有人可以将此作为答案吗？然后我可以接受它。万分感谢！ –

第一个可以写成这样（请注意，它宁愿不混合与事件处理您的标记，但是如果你真的想它，那么它可以这样写）

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

和第二个将从事件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">

来源

2017-09-14 08:56:24 Icepickle

第一个不应该被写入。 –

@JeremyThille我会同意它不适合，但是如果它必须写入，那么它可以这样写，以支持统一的参数值 – Icepickle

刚刚也注意到了这一点。只有'事件'在大多数浏览器中工作？ –

这包括两种情况：

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

来源

2017-09-14 08:54:00

非常整洁优雅，但有点破解:-)我认为这使得更多的意识用'event'替换'this'：''onclick =“myFunc（event）;'' –

如果你想支持旧的JavaScript风格'onkeypress =“...”'等等）更好地习惯于适应黑客行为。 :) –

用'event'代替'this'不会做任何事情：只是重命名事物，底层对象不会改变。 –

你可以有你的功能检查实例/类型参数（S）和委托逻辑等功能。

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

来源

2017-09-14 08:55:38 vassiliskrikonis

谢谢。我认为用'event'取代'this'会更有意义：'onclick =“myFunc（event）;”' –

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

回答

相关问题