Javascript附加到onClick事件 [英] Javascript append to onClick event

问题描述

我知道下面的代码无法正常工作。
是的我知道如何在jQuery中做到这一点，但在这种情况下，我不能使用jQuery。请不要回答jQuery。

 < form> 
< input type =textname =input1onclick =alert（'hello'）> 
< input type =textname =input2> 
< input type =textname =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

>


解决方案

这有助于：



 窗口.onload = function（）{
 for（var i = 0，element; element = document.forms [0] .elements [i]; i ++）{
 element.onclick =（function（onclick） {
返回函数（oEvent）{
 //引用事件以正确传递参数
 oEvent = oEvent ||事件; 
 if（onclick）
 onclick（oEvent ）; 
 //新代码注入
 alert（hello2）; 
} 
}）（element.onclick）; 
 
 
 $ / code $ / pre 
 
 
或者：
 
 
  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，则该功能将无法使用。
 
I have the following Code which I know doesn't work correctly. 
Yes I know how to do this in jQuery but in this case I cannot use jQuery. Please no jQuery answers.
<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>
What I'm trying to do is iterate through the form's elements and add to the onclick function.  But due to the fact that in my last iteration currentOnClick is null this does not run as expected. I want to preserve each of the elements onclick methods and play them back in the new function I'm creating.

What I want:


When input1 is clicked, alert "hello" then alert "hello2"
When Input2 is clicked, alert "hello2"
When Input3 is clicked, alert "hello2"

解决方案
This helps:
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);
    }
}
Or this:
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");
        }
    }
}
Please be warned, the technique will not work if event handlers were added with DOM-Events API.

                        
这篇关于Javascript附加到onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！