Tengo el siguiente Código que sé que no funciona correctamente.
Sí, yo sé cómo hacer esto en jQuery, pero en este caso no puedo usar jQuery. Por favor, no jQuery respuestas.

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

Lo que yo estoy tratando de hacer es recorrer los elementos del formulario y agregar a la función onclick. Pero debido al hecho de que en mi última iteración currentOnClick es nulo este no se ejecuta como se esperaba. Quiero preservar cada uno de los elementos onclick métodos y el juego de vuelta en la nueva función que estoy creando.

Lo que quiero:

  • Cuando input1 se hace clic en, alerta de «hola» alerta «hello2»

  • Cuando Entrada2 se hace clic en «alerta hello2»

  • Cuando Input3 se hace clic en «alerta hello2»

  • Qué está haciendo ahora que no esperaba?
  • Cuando alguna de las entradas es de un clic sobre alertas hello2. Para input1 quiero conservar el actual método onclick y ejecutar dentro de mi recién creada método onclick

2 Comentarios

  1. 4

    Esta ayuda:

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

    O este:

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

    Se advierte, la técnica no funcionará si los controladores de eventos se han añadido con DOM API de Eventos.

    • Gracias el primer método funciona como yo esperaba, pero necesito un poco de ayuda para la comprensión de la sintaxis. parece que te llame elemento.onclick = (somefunction)(elemento.onclick). Me appologize, pero yo simplemente no entiendo.
    • Ambos trabajan en el hecho. El JavaScript técnica utilizada en la primera solución se llama «cierre».
  2. 4

    de la manera que usted tiene, sus elementos se refieren a la misma instancia de currentOnClick. cada vez que asignar currentOnClick para el elemento actual existente de la función onclick, se pierde la referencia a la función anterior. usted necesita para crear la nueva función de controlador de eventos en un ámbito diferente para cada elemento.

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

    de esta manera, hay 3 diferentes instancias de currentOnClick flotando en el aire, cada uno de los sellados de los demás por el ámbito de la función.

Dejar respuesta

Please enter your comment!
Please enter your name here