在javascript中,如何包装onclick回调?

在javascript中,如何包装onclick回调?,javascript,Javascript,我想修饰或包装一个特定的onclick回调,以便在调用最初安装的回调之后执行我的代码 我从这里开始是为了用带有闭包的函数生成器以一种半python的方式来实现它: var original_onclick = node.onclick; function wrapper_onclick() { original_onclick.apply(this,arguments); my_code(); } node.onclick = wrapper_onclick; 但是,当我使用上

我想修饰或包装一个特定的
onclick
回调,以便在调用最初安装的回调之后执行我的代码

我从这里开始是为了用带有闭包的函数生成器以一种半python的方式来实现它:

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

但是,当我使用上述代码时,原始回调无法正常工作。我是否传入了错误的第一个参数(上下文参数?
this
。我需要调整参数吗?
这个
已经在列表
参数中了吗?

这正是为什么很多人努力寻找跨浏览器事件监听的合适解决方案的原因。有些浏览器没有在正确的上下文中启动函数,有些浏览器没有传递事件参数等等。使用框架要容易得多,但是如果你坚持不使用框架

首先,如果您有非常糟糕的代码,如:

<a href="javascript:someFunction( this , evaledVariable );otherFn( ohDearVariable )">
与删除侦听器相同:

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 );
因此,如果要以错误的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库或脏示例,如果不手动编码、查找引用或手动公开引用,您就无法可靠地包装它们。

基于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

使用JavaScript控制台,例如Firebug(用于FireFox)或Chrome中的“JavaScript控制台”,什么是“this”?您可以很容易地找到它,方法是将console.log(this)放入包装器单击,然后检查控制台中显示的结果项。打印时,
this
是页面的URL<代码>参数[0]
mouseevent
。这只是一个作为内部页面的greasemonkey脚本编写的黑客程序(开发人员对错误报告没有反应)。它不需要在所有浏览器上都是防弹的,只有chrome,这就是我要使用的。啊,在这种情况下,上下文中的一切都是允许的;)我建议您简单地使用addEventListener方法,而不是将其直接粘贴到节点上。
before
a b c
after