可靠地添加到 Javascript 事件答案

【问题标题】：Reliably adding to a Javascript event可靠地添加到 Javascript 事件
【发布时间】：2010-01-18 16:36:45
【问题描述】：

我有一个单选按钮，包含一个内联 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 事件并添加我的功能？

【问题讨论】：

标签： javascript javascript-events onclick

【解决方案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);
    }
}

执行顺序为：

内联事件
您的新活动

【讨论】：

这是正确的方式吗？在哪里记录了通过onclick 属性设置的事件处理程序保证在所有浏览器中首先触发？
@Tim，事件总是按顺序执行。由于内联 onclick 处理程序首先“注册”（在 DOM 元素存在之前，您不能将事件添加到它，并且一旦存在，内联处理程序就已附加到元素）。这是正确的方式，因为我强烈认为逻辑应该与结构分开。我想我的意思是用引号引起来，所以它揭示了我的偏见......我会编辑:)
内联事件和 W3 DOM 事件标准（更不用说 IE 的乱七八糟）之间的交互根本没有标准化。虽然当 IE、Mozilla、WebKit 和 Opera 都在某件事上达成一致时，你通常会成为赢家。

【解决方案2】：

试试：

currentEvent.call(box);

将box作为this的值传递给currentEvent()；

edit：Doug 的解决方案实际上更好。无论如何，所有函数对象都可用的call 和apply 方法是您在函数调用中更改this 值的方式。

【讨论】：

我认为问题在于this.form 永远不会通过，而不是this 的值。他调用currEvent();时没有保留任何参数信息。
这也可以通过call:currentEvent.call(box, box.form)来完成。
@Jon：你没有意识到 currentEvent 看起来像这样：function(){alterQuantity(this.form)}。 alterQuantity() 函数被编译为事件处理程序的主体，而不是事件处理程序本身。所以只需传递this 就足以将this.form 传递给alterQuantity()。