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

这有助于：

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添加事件处理程序，该技术将无效。

Answer 2

你拥有它的方式，你的元素都引用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个实例浮动，每个实例都被功能范围封闭。

Javascript附加到onClick事件

2 个答案: