使用apply（）的addEventListener [英] addEventListener using apply()
问题描述
我正在尝试使用apply（）方法调用addEventListener（）。代码如下：
I'm trying to invoke addEventListener() using apply() method. The code is like:
function rewrite(old){
return function(){
console.log( 'add something to ' + old.name );
old.apply(this, arguments);
}
}
addEventListener=rewrite(addEventListener);
它不起作用。该代码适用于普通的JavaScript方法，例如，
It doesn't work. The code works for normal JavaScript method, for example,
function hello_1(){
console.log("hello world 1!");
}
hello_1=rewrite(hello_1);
需要帮助！
谢谢！
推荐答案
不幸的是，你不能指望 addEventListener 是一个真正的Javascript函数。 （对于其他几个主机提供的函数也是如此，例如 window.alert ）。许多浏览器都做了正确的事情（tm）并使它们成为真正的Javascript函数，但是有些浏览器没有（我在看你，微软）。如果它不是真正的Javascript函数，它将不会将 apply 和调用函数作为属性。
You can't count on addEventListener being a real Javascript function, unfortunately. (This is true of several other host-provided functions, like window.alert). Many browsers do the Right Thing(tm) and make them true Javascript functions, but some browsers don't (I'm looking at you, Microsoft). And if it's not a real Javascript function, it won't have the apply and call functions on it as properties.
因此，您无法通过主机提供的功能实际执行此操作，因为您需要 apply 功能如果要将代理中的任意数量的参数传递给目标。相反，你必须使用特定的函数来创建知道所涉及的主机函数签名的包装器，如下所示：
Consequently, you can't really do this generically with host-provided functions, because you need the apply feature if you want to pass an arbitrary number of arguments from your proxy to your target. Instead, you have to use specific functions for creating the wrappers that know the signature of the host function involved, like this:
// Returns a function that will hook up an event handler to the given
// element.
function proxyAEL(element) {
return function(eventName, handler, phase) {
// This works because this anonymous function is a closure,
// "closing over" the `element` argument
element.addEventListener(eventName, handler, phase);
}
}
当你调用它时，传入一个元素，它返回一个函数，它将事件处理程序通过 addEventListener 挂钩到该元素。 （请注意，IE8之前的IE没有 addEventListener ;它使用 attachEvent 代替。）
When you call that, passing in an element, it returns a function that will hook up event handlers to that element via addEventListener. (Note that IE prior to IE8 doesn't have addEventListener, though; it uses attachEvent instead.)
不知道这是否适合您的使用案例（如果没有，更多关于用例的细节会很方便）。
Don't know if that suits your use case or not (if not, more detail on the use case would be handy).
你可以像这样使用上面的内容：
You'd use the above like this:
// Get a proxy for the addEventListener function on btnGo
var proxy = proxyAEL(document.getElementById('btnGo'));
// Use it to hook the click event
proxy('click', go, false);
请注意，我们没有将元素引用传递给 proxy 我们打电话的时候;它已经内置到函数中，因为函数是一个闭包。如果您不熟悉它们，我的博客会发布 关闭并不复杂 可能有用。
Note that we didn't pass the element reference into proxy when we called it; it's already built into the function, because the function is a closure. If you're not familiar with them, my blog post Closures are not complicated may be useful.
这是一个完整的例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#log p {
margin: 0;
padding: 0;
}
</style>
<script type='text/javascript'>
window.onload = pageInit;
function pageInit() {
var proxy;
// Get a proxy for the addEventListener function on btnGo
proxy = proxyAEL(document.getElementById('btnGo'));
// Use it to hook the click event
proxy('click', go, false);
}
// Returns a function that will hook up an event handler to the given
// element.
function proxyAEL(element) {
return function(eventName, handler, phase) {
// This works because this anonymous function is a closure,
// "closing over" the `element` argument
element.addEventListener(eventName, handler, phase);
}
}
function go() {
log('btnGo was clicked!');
}
function log(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.getElementById('log').appendChild(p);
}
</script>
</head>
<body><div>
<input type='button' id='btnGo' value='Go'>
<hr>
<div id='log'></div>
</div></body>
</html>
关于你的问题，关于 func.apply（）与 func（），我想你可能已经理解了，只是我原来的错误答案让人困惑。但为了以防万一： apply 调用函数，做两件特别的事情：
Regarding your question below about func.apply() vs. func(), I think you probably already understand it, it's just that my original wrong answer confused matters. But just in case: apply calls function, doing two special things:
- 集什么
这个将在函数调用中。 - 接受将函数作为数组（或类似数组）赋予的参数事情）。
- Sets what
thiswill be within the function call. - Accepts the arguments to give to the function as an array (or any array-like thing).
你可能知道，这个在Javascript中是完全不同的来自这个在其他一些语言中，如C ++，Java或C＃。 Javascript中的这个与定义函数的位置无关，它完全取决于函数的调用方式。每次调用函数时，都必须将此设置为正确的值。 （更多关于这个在Javascript 这里。）有两种方法可以做到这一点：
As you probably know, this in Javascript is quite different from this in some other languages like C++, Java, or C#. this in Javascript has nothing to do with where a function is defined, it's set entirely by how the function is called. You have to set this to the correct value each and every time you call a function. (More about this in Javascript here.) There are two ways to do that:
- 通过对象属性调用函数;将
此设置为调用中的对象。例如，foo.bar（）将此设置为foo并调用bar。 - 通过自己的
apply调用该函数或致电属性;那些将这个设置为他们的第一个参数。例如，bar.apply（foo）或bar.call（foo）将设置这个到foo并致电bar。
- By calling the function via an object property; that sets
thisto the object within the call. e.g.,foo.bar()setsthistofooand callsbar. - By calling the function via its own
applyorcallproperties; those setthisto their first argument. E.g.,bar.apply(foo)orbar.call(foo)will setthistofooand callbar.
申请和调用之间的唯一区别是他们如何接受传递给目标函数的参数： apply 接受它们作为数组（或类似数组的东西）：
The only difference between apply and call is how they accept the arguments to pass to the target function: apply accepts them as an array (or an array-like thing):
bar.apply(foo, [1, 2, 3]);
而 call 接受它们作为单独的参数：
whereas call accepts them as individual arguments:
bar.apply(foo, 1, 2, 3);
这些都叫 bar ，设置此到 foo ，并传入参数1,2和3。
Those both call bar, seting this to foo, and passing in the arguments 1, 2, and 3.
这篇关于使用apply（）的addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
