javascript - 可靠地添加到 JavaScript 事件

Question

我有一个单选按钮，包含一个内联 onclick 事件:

<input type="radio" class="quantitycheckbox" onclick="alterQuantity(this.form)">

我试图在点击时不显眼地添加更多功能，并使用以下代码:

function updateCustomFields( box ) {
    // save current onclick event before assigning new one
    var currEvent = box.onclick;
    box.onclick = function() {
        currEvent();
        // do additional stuff here
    }
}

var boxes = $class('quantitycheckbox');
for( var i = 0; i < boxes.length; i++ ) {
    updateCustomFields( boxes[i] );
}

但是，传递到 alterQuantity 函数的 this.form 值未定义，因此我收到错误。如何按原样保留 onclick 事件并添加我的功能？

Answer 1

您不需要对内联 onclick 事件执行任何操作。只需使用 attachEvent 或 addEventListener 附加另一个事件即可解决您的问题，因为内联 onclick 事件始终会首先触发:

function updateCustomFields( box ) {
    var myCallback = function(){
      // Do stuff here
    }
    if(window.addEventListener){
      box.addEventListener('click', myCallback, false);
    } else if (window.attachEvent){
      box.attachEvent('onclick', myCallback);
    }
}

执行顺序为:

1. 内嵌事件
2. 您的新事件