Javascript 附加到 onClick 事件

Question

我知道以下代码不能正常工作。 是的，我知道如何在 jQuery 中执行此操作，但在这种情况下，我无法使用 jQuery。请不要使用 jQuery 答案。

<form>
  <input type="text" name="input1" onclick="alert('hello')">
  <input type="text" name="input2">
  <input type="text" name="input3">
</form>


<script type="text\javascript">
  window.onload = function () {
    var currentOnClick;
    for (var i = 0; i < document.forms[0].elements.length; i++) {
      currentOnClick = document.forms[0].elements[i].onclick;
      document.forms[0].elements[i].onclick = function () {
        if (currentOnClick) {
          currentOnClick();
        }
        alert("hello2");
      }
    }
  }
</script>

我想要做的是遍历表单的元素并添加到 onclick 函数中。但由于在我的最后一次迭代中 currentOnClick 为 null ，这并没有按预期运行。我想保留每个元素的 onclick 方法并在我正在创建的新函数中播放它们。

我想要什么：

• 点击 input1 时，先提示“hello”，然后提示“hello2”

• 点击 Input2 时，提示“hello2”

• 点击 Input3 时，提示“hello2”

Answer 1

按照你的方式，你的元素都引用currentOnClick 的同一个实例。每次将 currentOnClick 分配给当前元素的现有 onclick 函数时，它都会丢失对前一个函数的引用。您需要在每个元素的单独范围内创建新的事件处理函数。

function addClickProxy(element) {
    var currentOnClick = element.onclick;
    element.onclick = function() {
        if (currentOnClick) {
            currentOnClick();
        }
        alert("hello2");
    }
}

window.onload = function() {
    for (var i = 0; i < document.forms[0].elements.length; i++) {
        addClickProxy(document.forms[0].elements[i]);
    }
}

这样，有 3 个不同的 currentOnClick 实例在周围浮动，每个实例都通过函数范围与其他实例隔离。

Answer 2

这有帮助：

window.onload = function () {
    for (var i = 0, element; element = document.forms[0].elements[i]; i++) {
        element.onclick = (function (onclick) {
            return function(oEvent) {
                // reference to event to pass argument properly
                oEvent  = oEvent || event;
                if (onclick)
                    onclick(oEvent);
                // new code "injection"
                alert("hello2");
            }
        })(element.onclick);
    }
}

或者这个：

window.onload = function () {
    for (var i = 0, element; element = document.forms[0].elements[i]; i++) {
        element.exonclick = element.onclick;
        element.onclick = function (oEvent) {
            if (this.exonclick) {
                this.exonclick(oEvent);
            }
            //
            alert("hello2");
        }
    }
}

请注意，如果使用 DOM-Events API 添加事件处理程序，该技术将不起作用。