在JavaScript中，如何包装onclick回调？

Question

我想装饰或包装特定的onclick回调，以便在调用原始安装的回调后执行我的代码。

我开始与这一点是为了使用函数发生器用封做到在一个半python'ic方式：

var original_onclick = node.onclick; 
function wrapper_onclick() { 
    original_onclick.apply(this,arguments); 
    my_code(); 
} 
node.onclick = wrapper_onclick; 

然而，当我使用上面的代码，原来的回调不工作正常。我是否传入错误的第一个参数（上下文参数？）this。我需要调整参数吗？ this已经在列表中arguments？

Answer 1

基于从马特和BGerrissen帮助，下面的代码为镀铬的伟大工程：

var original_onclick = node.onclick; 
function wrapper_onclick(e) { 
    var ret = original_onclick(e); 
    remove_story_onclicks(); 
    return ret; 
} 
node.onclick = wrapper_onclick; 

还没完全知道如何做一个防弹包装像蟒蛇如下：

def wrappee(foo,bar,baz): 
    print foo,bar,baz 

def wrapper(*args,**kwargs): 
    print 'before' 
    wrappee(*args,**kwargs) 
    print 'after' 

wrapper('a','b','c') 

打印

before 
a b c 
after 

Answer 2

这正是很多人努力寻找适合跨浏览器事件监听的解决方案的原因。某些浏览器不会在正确的上下文中触发该功能，某些浏览器不会传递事件参数等等。这是一个更容易使用的框架，但如果你使用任何框架...

首先坚持如果你真的太可怕了这样的代码：

<a href="javascript:someFunction(this , evaledVariable);otherFn(ohDearVariable)"> 

然后不好意思，没有人可以帮你。

否则......

在任何情况下，你不能直接通过简单的设置.onclick属性附加的事件节点，并期待它的表现同样跨浏览器的，甚至在你的浏览器中正常工作与...发展。您必须同时使用addEventListener和attachEvent方法。

分叉跨浏览器事件的最简单的方法是：

var addListener = function(node , event , listener) { 

    if (node.addEventListener) { 

     node.addEventListener(event , listener , false); 

    } else if (node.attachEvent) { 

     node.attachEvent("on" + event , listener); 

    } 

} 

同为消除听众：

var removeListener = function(node , event , listener) { 

    if (node.addEventListener) { 

     node.removeEventListener(event , listener , false); 

    } else if (node.attachEvent) { 

     node.detachEvent("on" + event , listener); 

    } 

} 

就这样使用它：所以，如果你

var nodeListener = function(e) { 
    alert(e.target); 
    // run once for demo 
    removeListener(node , "click" , nodeListener); 
} 
// notice we omit the "on" part. 
addListener(node , "click" , nodeListener); 

想要将侦听器附加到节点的WRONG onclick方式：

var wrongOnClick = node.onclick; 

var listener = function(e) { 
    before(); 
    wrongOnClick.call(this , e); 
    after(); 
}; 

addListener(node , "click" , listener); 

这将成为最流行的浏览器包括IE，但需要有一个良好的实现实际上更大量optimalisation和内存泄漏预防的代码，但不是自己编写这些代码或让他人为你做，请使用框架/无线工具包！因为到那时你有一个很好的实施运行，工程跨浏览器，你将有更多的代码膨胀，然后当你真正使用的框架...

** **增编

一劈，我还是建议使用addEventListener方法并保持对您的侦听器的引用。

var aListener = function(e) { } 
node.addEventListener("click" , aListener , false); 

var wrappedListener = function (e) { 
    before(e); 
    aListener(e); 
    after(e); 
} 
node.removeEventListener("click" , aListener , false); 
node.addEventListener("click" , wrappedListener , false); 

这显然只能与听众的作品，如果你想让它包装现有的听众在一个页面（从别人监听器），那么就根本没有人知道如何追加他们的听众节点的方式。如果他们在本文的开头使用了addEventListener/attachEvent库或脏例子，那么您无法可靠地将它们包装起来，而无需手动编码，查找引用或手动公开它们。