代码之家 › 专栏 › 技术社区 › John Hartsock

Javascript追加到onClick事件

html javascript

John Hartsock · 技术社区 · 14 年前

我知道下面的代码不能正常工作。

<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方法中的每个元素,并在我创建的新函数中回放它们。

单击Input2时,发出警报“hello2”

2 回复 | 直到 11 年前

Sergey Ilinsky 14 年前

这有助于:

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一起添加,则该技术将不起作用。

lincolnk 14 年前

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

当前单击 四处飘浮,每个都被功能范围密封起来。