Cada vez es más frecuente encontrar literatura que habla de eventos DOM Level 0 o DOM Level 2 y actualmente incluso de DOM Level 3. Esto hace referencia a las distintas versiones del estándar DOM (Document Object Model) que se han ido definiendo y cómo estas versiones definen la creación y suscripción de los eventos JavaScript en una aplicación HTML.
Definición del DOM
Empecemos por el principio: el DOM es un modelo de objetos que crea y mantiene el navegador en memoria para representar una página web. La forma más usual de que el navegador obtenga un DOM es mediante el código HTML de una página: el navegador procesa la página y crea un DOM que es el que representa por pantalla. A partir de ese momento el navegador se “olvida” del HTML y trabaja solo con el DOM. Por supuesto la gracia es que, usando JavaScript, el DOM es manipulable: esa es la esencia de las aplicaciones web. Y dado que el navegador representa por pantalla el DOM en todo momento, un cambio en el DOM es un cambio visual. Así, pues, en JavaScript no manipulamos el HTML de la página, eso no existe realmente en tiempo de ejecución. Lo que manipulamos es el DOM.
Cómo manipular el DOM
Para manipularlo usamos una API llamada DOM API, que se ha ido estandarizando con el tiempo. Mucha gente confunde la DOM API con la API propia de JavaScript cuando son dos cosas totalmente independientes. Es perfectamente posible tener JavaScript sin tener ningún DOM (eso es lo que ocurre precisamente con Node por ejemplo, que permite desarrollar en JavaScript fuera del contexto de un navegador). Así métodos como document.getElementById no forman parte de la API de JavaScript sino de la API del DOM. Si quieres una referencia de toda la API del DOM en la actualidad puedes consultar esa página de la Mozilla Developer Network.
De hecho manipular el DOM es tan importante en el desarrollo web que han aparecido librerías específicamente destinadas a facilitar esta tarea, como puede ser jQuery.
Todos los navegadores permiten ver una representación textual del DOM a través de las herramientas de desarrollador: estas herramientas muestran una representación del DOM que tiene el navegador. P. ej. la siguiente imagen muestra el DOM que tiene el navegador después de cargar una página HTML en contraposición al código HTML de la página (a la derecha):
Se puede observar como el <span> marcado en amarillo está en el DOM pero no en el código HTML original: este <span> está creado mediante el código JavaScript incrustado en la página. Por cierto: el propio tag <script> forma parte del DOM.
Eventos DOM
Lo que llamamos “Eventos DOM Level 0” son los eventos que se asocian a los elementos del HTML mediante atributos: Los clásicos onclick, onchange, onsubmit, es decir, este tipo de código:
<button onclick="javascript:buttonClicked();">Click me</button>
<script>
function buttonClicked() {
alert('clicked');
}
</script>
O bien la variante más JavaScript:
<button id="btn">Click me</button>
<script>
(function() {
var button = document.getElementById('btn');
btn.onclick = function() {
alert('clicked');
};
})();
</script>
A pesar de que a esta forma de declarar eventos se la conoce como “Eventos DOM Level 0” es importante saber que no hay especificación alguna llamada DOM Level 0. La primera especificación del DOM (DOM Level 1) fue allá por el 1998, pero JavaScript y esa forma de asociarse a los eventos ya existía antes (inventada por Netscape), de ahí que se la conozca con ese nombre.
La especificación DOM Level 1 no incorporaba nada relativo a los eventos, así que nada cambió cuando apareció. Por supuesto, por aquel entonces (recuerda, a finales de los 90), nadie hablaba de “DOM Level 0 Events” ni nada parecido: esta nomenclatura surgió después.
Fue con la segunda especificación del DOM, conocida con el nombre de DOM Level 2, allá por el 2000, cuando las cosas cambiaron y surgió un nuevo modelo de eventos. Ya no es necesario usar los atributos onxxx para declarar la función gestora de un evento: en su lugar se puede usar la función addEventListener:
<button id="btn">Click me</button>
<script>
(function() {
var button = document.getElementById('btn');
btn.addEventListener('click', function (evt) {
alert('clicked');
}, true);
})();
</script>
IE se hizo el remolón y no se adhirió a ese estándar hasta IE9. Versiones anteriores de IE tenían otro mecanismo para asociarse a eventos, a través de una función propia llamada attachEvent. Te puedes imaginar los dolores de cabeza que causaba eso a los desarrolladores web que tenían que crear código específico para IE o bien seguir usando los eventos DOM Level 0, a pesar de que no tienen la misma funcionalidad. Para más detalles puedes consultar este post del equipo de IE: DOM Level 3 Events support in IE9.
A esta forma de suscribirse a los eventos se la conoce como “Eventos DOM Level 2”. Respecto a DOM Level 0, la principal ventaja de los eventos DOM Level 2 es que más de una función gestora puede registrarse para el mismo evento del mismo elemento. Esto no es posible en eventos DOM Level 0, porque al atributo onxxx se le puede colocar un solo valor (la función gestora). Así, p. ej. el siguiente código mostrará dos alerts, ya que hay suscritas dos funciones gestoras del evento click del mismo botón:
<button id="btn">Click me</button>
<script>
(function() {
var button = document.getElementById('btn');
btn.addEventListener('click', function (evt) {
alert('clicked');
}, true);
btn.addEventListener('click', function(evt) {
alert('clicked 2');
}, true);
})();
</script>
Si se mezclan eventos DOM Level 0 y DOM Level 2 en el mismo elemento los Level 0 tiene preferencia:
<script>
function showAlert() {
alert('DOM Level 0');
}
(function() {
var button = document.getElementById('btn');
btn.addEventListener('click', function (evt) {
alert('clicked');
}, true);
})();
</script>
Este código muestra primero el alert “DOM Level 0” y luego el alert “clicked”.
Finalmente la última versión actual del DOM (DOM Level 3) no define ningún mecanismo nuevo para suscribirse a los eventos, pero sí que estandariza algunos eventos que, sorprendentemente, no lo estaban (p. ej. keydown o keypress) facilitando la creación de aplicaciones que funcionen en cualquier tipo de navegador y además añade nueva funcionalidad a la clase Event, usada para crear eventos de forma programática.
Fecha de publicación: