在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