在javascript中，我如何包装一个onclick回调？

Question

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

我开始这样做是为了使用带有闭包的函数发生器以半python的方式进行：

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

但是，当我使用上面的代码时，原始回调不能正常工作。 我是在传递错误的第一个参数（context参数？） this 。 我需要调整参数吗？ this已经在列表arguments吗？

Answer 1

这正是为什么很多人都在寻找适合跨浏览器事件监听的解决方案的原因。 某些浏览器未在正确的上下文中触发该函数，某些浏览器未传递事件参数，依此类推。 使用框架要容易得多，但如果你坚持不使用框架......

首先，如果你有如下可怕的代码：

<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在内的大多数现代浏览器，但实际上需要更多的优化和内存泄漏防护代码才能实现良好的实现，但是不要自己编写这些代码或让其他人为您执行此操作，请使用framework / tookit！ 因为当你有一个良好的实现运行时，跨浏览器工作，当你实际使用框架时，你会有更多的代码膨胀...

**附录**

作为一种技巧，我仍然建议使用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库或肮脏的示例，那么您将无法可靠地包装它们，而无需手动编码，查找引用或手动公开它们。

Answer 2

在Matt和BGerrissen的帮助下，以下代码非常适合chrome：

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

仍然不确定如何在Python中执行防弹包装，如下所示：

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