Eventos de JavaScript registrarte sin usar jQuery

La forma correcta de hacer algo como lo siguiente sin el uso de jQuery.

   $(document).ready(function(){
      $("#someButton").click(function(){
        alert("Hello");
      });
   });

Gracias.

  • Sin Jquery? con qué lenguaje ?!?
  • jquery no es un lenguaje. PS: el uso de javascript. Gracias.
  • CORRECTO & RESPUESTA es SIMPLE: Ponga su secuencia de comandos después de utilizar elementos – más fácil – justo antes de </body>
InformationsquelleAutor Babiker | 2010-06-19

6 Kommentare

  1. 35

    La forma más sencilla es:

    //DOM Level 0 way
    window.onload = function () {
      document.getElementById("someButton").onclick = function() {
        alert("Hello");
      };
    };

    Esto funcionará en todos los navegadores, pero tenga en cuenta que con este enfoque sólo uno controlador de eventos puede ser conectado a un evento.

    Observe también que el onload evento no es completamente equivalente a la de jQuery ready evento, onload se desencadena cuando todos los recursos de la página se ha cargado completamente (imágenes, sub-tramas, etc…), mientras que ready incendios tan pronto el DOM ha sido analizado.

    Si desea adjuntar varios manejadores de eventos, puede utilizar el DOM Nivel 2 Estándar elemento .addEventListerner método (o elemento .attachEvent para IE)

    El más simple abstracción para obtener un cross-browser para enlazar eventos es:

    function addEvent(el, eventType, handler) {
      if (el.addEventListener) { //DOM Level 2 browsers
        el.addEventListener(eventType, handler, false);
      } else if (el.attachEvent) { //IE <= 8
        el.attachEvent('on' + eventType, handler);
      } else { //ancient browsers
        el['on' + eventType] = handler;
      }
    }

    Entonces usted puede:

    var button = document.getElementById("someButton");
    addEvent(button, 'click', function () {
      alert("Hello");
    });
    
    addEvent(button, 'click', function () {
      alert("world!");
    });

    Ser conscientes también de que el addEventListener y del IE attachEvent métodos tienen sus diferencias, al adjuntar múltiples controladores para un evento con addEventListener que se dispararon en el mismo orden, como los controladores estaban obligados (FIFO), attachEvent activará los controladores en el contrario orden (LIFO).

    Echa un ejemplo aquí.

    • Esto no debe ser aceptado contestar, así que me downvote. No se muestra el equivalente de documento.listo, cartel explica, pero aún así, esto debe ser un comentario, no una respuesta, lo siento…
  2. 8

    TL;DR

    En un navegador moderno:

    <input type="button" id="someButton" value="Some Button">
    <script>
    document.getElementById("someButton").addEventListener("click", function() {
        alert("Hello");
    }, false);
    </script>

    Nota la secuencia de comandos es después de el botón en el HTML. ¿Por qué es importante? Siga leyendo.

    JS:

    document.getElementById("someButton").addEventListener("click", function() {
        snippet.log("Hello");
    }, false);

    HTML:

    <input type="button" id="someButton" value="Some Button">
    <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


    Oh bueno, seguí leyendo.

    Hay tres partes:

    1. Al conectar el controlador (la parte del código jQuery es el uso de ready para)

    2. Cómo encontrar el elemento(s) para conectar (la parte del código jQuery es el uso de $("#someButton") para)

    3. Cómo conectar el controlador (la parte que está utilizando click para)

    Al conectar el controlador

    Cuando el manejo de eventos directamente en un elemento, no se puede conectar al controlador de eventos hasta que el elemento existe. Cuando se trata con elementos que están en la página principal de HTML, usted sabe que existe una vez que el HTML se ha analizado. Así, por ejemplo:

    <div>...</div>
    <script>
        //Here, we know that that div exists
    </script>

    Así que a menos que tenga una buena razón para hacer lo contrario, poner las etiquetas de script para tu código JavaScript al final del documento, justo antes de la clausura </body> etiqueta. Entonces usted sabe que todos los elementos anteriores (incluyendo document.body) existe.

    Si usted no tiene ninguna opción pero para poner sus etiquetas de secuencia de comandos en otros lugares (tales como el anti-patrón que está poniendo en <head>), entonces usted tiene que recurrir a conectar un controlador de eventos para cuando el contenido de la página ha sido analizado. El estándar es DOMContentLoaded, que puede enchufarse en document. Por desgracia, IE8 y versiones anteriores no soportan, que es parte de por qué jQuery proporciona la ready de devolución de llamada. También puede utilizar el load evento en el window objeto, pero que no se dispara hasta que largo después de los elementos de la página se han analizado, porque espera a que todos los recursos externos para cargar (todas las imágenes, etc.) antes de la cocción.

    Cómo encontrar el elemento(s) para la conexión

    En tu ejemplo, el elemento tiene un id valor, y así que usted puede utilizar documento.getElementById a obtener; que devuelve una referencia al elemento objeto, o null si no hay ninguno con el que id.

    Navegadores modernos, y también IE8, apoyo documento.querySelector, que se encuentra el primer elemento coincidente cualquier selector CSS. Así, por ejemplo, document.querySelector('div') encuentra el primer div en el documento (null si no hay ninguno). document.querySelector('div.foo table tr.bar') encuentra el primer tr elemento con la clase bar que dentro de un table que dentro de un div elemento con clase foo.

    Los navegadores modernos (y IE8), también proporcionan documento.querySelectorAll, que le da una lista (colección) de todos los elementos que coinciden con un selector CSS.

    querySelector y querySelectorAll también están disponibles en los elementos; cuando se utilizan en elementos, que sólo mira ese elemento de los descendientes.

    También hay varias otras funciones, como getElementsByTagName (casi universalmente admitidos, incluso en el viejo IE), getElementsByName (utilizando el name atributo; no tengo idea de cómo un amplio apoyo es), getElementsByClassName (consultar por una sola clase de CSS; IE8 y anteriores no lo tiene), y algunos otros.

    Cómo conectar el controlador

    Navegadores modernos, incluyendo IE9 y mayor en las normas modo, el apoyo addEventListener. Con IE8 y anteriores, usted tiene que utilizar originales de Microsoft attachEvent (que es anterior a la addEventListener).

    theElement.addEventListener("click", function() {
        //...your handler code here
    }, false);
    
    //or
    
    theElement.attachEvent("onclick", function() {
        //...your handler code here
    });

    Nota que addEventListener sólo utiliza el nombre del evento ("click"), pero attachEvent utiliza "on" más el nombre del evento ("onclick"). También tenga en cuenta que addEventListener tiene un tercer argumento que casi siempre wan para establecer false. (Los navegadores recientes han hecho que el argumento opcional, pero no siempre, así que si usted puede necesitar el apoyo de más edad, la incluyen.)

    La principal ventaja del uso de addEventListener o attachEvent es que, al hacerlo, juega bien con los demás, debido a que un elemento puede tener más de una controlador de eventos registrados para el mismo evento cuando el uso de estos métodos.

    Elementos también expone a las propiedades que se pueden asignar funciones a, donde el nombre de la propiedad es on seguido por el nombre del evento, por ejemplo onclick:

    theElement.onclick = function() {
        //Your handler code
    };

    Este se admite universalmente cross-browser, pero tiene el problema de que un elemento puede tener sólo un controlador conectado en este camino.

    Así, podemos implementar su código jQuery como este:

    <script>
    document.getElementById("someButton").onclick = function() {
        alert("Hello");
    };
    </script>
    </body>
    </html>

    (Nota donde la etiqueta es.) Pero que no juega bien con los demás.

    JS:

    document.getElementById("someButton").onclick = function() {
        snippet.log("Hello");
    };

    HTML:

    <input type="button" id="someButton" value="Some Button">
    <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

    O en un navegador moderno:

    <script>
    document.getElementById("someButton").addEventListener("click", function() {
        alert("Hello");
    }, false);
    </script>
    </body>
    </html>

    JS:

    document.getElementById("someButton").addEventListener("click", function() {
        snippet.log("Hello");
    }, false);

    HTML:

    <input type="button" id="someButton" value="Some Button">
    <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

    O en IE8 y anteriores:

    <script>
    document.getElementById("someButton").attachEvent("onclick", function() {
        alert("Hello");
    });
    </script>
    </body>
    </html>

    JS:

    document.getElementById("someButton").attachEvent("onclick", function() {
        snippet.log("Hello");
    });

    HTML:

    <input type="button" id="someButton" value="Some Button">
    <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
    <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

    Ahora, supongamos que utilizamos querySelectorAll o similares y obtener un lista de elementos, en lugar de sólo uno de los elementos? ¿Cómo podemos conectar un controlador en cada uno de ellos?

    Podemos utilizar las técnicas de esta otra respuesta bucle a través de la colección, ya que será un matriz-como objeto (pero no se trata de una matriz). Digamos que queremos buscar un controlador en todos los div elementos con la clase foo:

    var list = document.querySelectorAll("div.foo");
    Array.prototype.forEach.call(list, function(element) {
        element.addEventListener("click", handler, false);
    });
    function handler() {
        this.innerHTML = "You clicked me";
    }

    (No te preocupes que en this, trataré de que en «Más para explorar» a continuación).

    JS:

    var list = document.querySelectorAll("div.foo");
    Array.prototype.forEach.call(list, function(element) {
        element.addEventListener("click", handler, false);
    });
    function handler() {
        this.innerHTML = "You clicked me";
    }

    HTML:

    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="bar">bar (no handler)</div>
    <div class="bar">bar (no handler)</div>
    <div class="bar">bar (no handler)</div>
    <div class="bar">bar (no handler)</div>

    Más para explorar

    Manejo de eventos no sólo se trata de llegar al evento. Hay otros cuatro cosas controladores de eventos a veces quiere hacer:

    1. Obtener información sobre el evento (por ejemplo, si se presiona una tecla, lo que la clave?)

    2. Evitar la acción por defecto del evento, si lo tiene (por ejemplo, evitando el defecto en un submit evento en un formulario deja de ser presentado)

    3. Detener la propagación (burbujeo) de los eventos a los elementos del contenedor

    4. Referencia el elemento que el evento fue enganchado en la (por lo que podemos utilizar el mismo controlador en varios elementos)

    #4 es fácil: En un controlador conectado con alguno de los mecanismos que hemos discutido anteriormente, en el controlador, this se refieren a los elementos que el evento fue enganchado. (Este no es el caso del atributo HTML conexiones, por ejemplo,<div onclick="handler()">, que es una de las muchas razones para no utilizarlos.) Si usted ha hecho algo más con this (que se puede), también puede acceder al elemento que conectó el evento en la via el currentTarget de la propiedad del objeto de evento (más abajo).

    Por desgracia, la forma de hacer esto es diferente en IE8 y anteriores con attachEvent y que cumplen con los estándares de los navegadores (addEventListener). Aquí está una función, hookEvent, (que originalmente escribí para esta otra respuesta), que permite el uso de las normas basadas en camino, incluso en la edad, es decir:

    var hookEvent = (function() {
        var div;
    
        //The function we use on standard-compliant browsers
        function standardHookEvent(element, eventName, handler) {
            element.addEventListener(eventName, handler, false);
            return element;
        }
    
        //The function we use on browsers with the previous Microsoft-specific mechanism
        function oldIEHookEvent(element, eventName, handler) {
            element.attachEvent("on" + eventName, function(e) {
                e = e || window.event;
                e.preventDefault = oldIEPreventDefault;
                e.stopPropagation = oldIEStopPropagation;
                handler.call(element, e);
            });
            return element;
        }
    
        //Polyfill for preventDefault on old IE
        function oldIEPreventDefault() {
            this.returnValue = false;
        }
    
        //Polyfill for stopPropagation on old IE
        function oldIEStopPropagation() {
            this.cancelBubble = true;
        }
    
        //Return the appropriate function; we don't rely on document.body
        //here just in case someone wants to use this within the head
        div = document.createElement('div');
        if (div.addEventListener) {
            div = undefined;
            return standardHookEvent;
        }
        if (div.attachEvent) {
            div = undefined;
            return oldIEHookEvent;
        }
        throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
    })();

    Utilizando hookEvent, podemos hacer las tres cosas mencionadas anteriormente en la base de estándares manera:

    1. Recibimos el objeto de evento como el primer argumento de la función del controlador, lo que significa que puede utilizar su currentTarget para obtener una referencia al elemento que enganchó al evento, o target para obtener una referencia al elemento en el que se originó, y así sucesivamente

    2. Podemos evitar el defecto llamando a la del objeto de evento preventDefault función

    3. Podemos detener la propagación llamando a la del objeto de evento stopPropagation función

    4. Podemos utilizar this (o event.currentTarget) para hacer referencia al elemento donde hemos conectado el evento

    hookEvent no es un fondo, canto de todos, todos bailando-conexión de evento de la función. (Para una cosa, nunca me molesté en apoyo de la onuenlazar eventos con ella). Es un ejemplo de código, principalmente.

    Material de referencia

    • La mayoría de esto es que ahora cubiertos por la especificación de HTML5, que se acerca mucho más que HTML

    • Varios aspectos son definidos por la DOM; lista de especificaciones aquí, actual DOM4

    • Mozilla Developer Network tiene una enorme gama de razonablemente precisa referenece material (a diferencia de algunos otros meta sitios, que con frecuencia han exactitud).

  3. 1

    ¿Algo como esto?

    document.getElementById('someButton').onclick = function () { alert('Hello');}

  4. 1

    Esta respuesta no es tan sencilla, sin jQuery, debido a que hay dos estilos principales (dependiendo del navegador que esté utilizando) para enlazar los eventos. Si no utiliza uno de los dos estilos, a continuación, los eventos pueden sobrescribir el uno al otro. Aquí está el más simple/sobrescribir estilo:

    window.onload = function() {
        document.getElementById("someButton").onclick = function() {
            alert("Hello");
        }
    }

    Pero si usted intenta y a la de arriba dos veces, sólo se obtendrá una alerta, porque la segunda vez que sobrescribirá la primera. Alternativamente, usted puede hacer algunos navegador/detección de características y, a continuación, utilizar el caso específico de los mecanismos para navegadores específicos; para obtener más información sobre el estilo de retirar QuirksMode.com:

    http://www.quirksmode.org/js/events_advanced.html

  5. 1

    intente esto:

    HTML:

    <html>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Test clicks</title>
    
    
      <script type="text/javascript">
        function setClicks() {
          var element = document.getElementById('test');
          element.onclick = function() {
            alert('test');
          }
        }
      </script>
    </head>
    
    <body onload="setClicks();">
      <div id="test" name="test">
        test
      </div>
    
    
    </body>
    
    </html>

  6. 0

    Hasta donde yo sé, onLoad NO es la misma que En la preparación de DOM.

    De Carga de espera para que todos los activos para ser cargado (imágenes, otros archivos externos).
    mientras que En DOM Listo solo espera HTML para ser procesados y no espere a que los activos a ser cargado.

    Me corrija si estoy equivocado.

    • mirando el jQuery 1.4.2 código de sí, no es totalmente equivalente, sin embargo, que el uso onload como la última oportunidad para detectar el evento correcto: «// Un retroceso a la ventana.onload, que será siempre la ventana de trabajo.addEventListener( «load», jQuery.listo, false ); «

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea