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”。

- John Hartsock

---

现在它正在做什么，让你感到意外？ - tloflin

当任何输入被点击时，它会弹出 hello2。对于 input1，我希望它保留当前的 onclick 方法并在我的新创建的 onclick 方法内运行。 - John Hartsock

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]);
    }
}

这样做，currentOnClick就会有3个不同的实例，每个实例都被函数作用域封闭，与其他实例隔离。

- lincolnk

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添加了事件处理程序，则该技术将无法正常工作。

- Sergey Ilinsky

---

谢谢，第一种方法的效果就像我期望的那样，但我需要一些帮助理解语法。你似乎调用了 element.onclick = (somefunction)(element.onclick)。我很抱歉，但我就是不明白。 - John Hartsock

两种方法都可以起作用。第一种解决方案中使用的JavaScript技术称为“闭包”。 - Sergey Ilinsky