Javascript addEvent() simplificado y crossbrowser

wpoch — Sat, 29 Mar 2008 04:13:08 +0000

Hola a todos, esta noche querìa comentarles dos scripts javascript para “limpiar” nuestro (X)HTML de javascript. Mediante la utilizaciòn de javascript no intrusivo.
Una pràctica comùn para agregarle comportamiento a los diferentes elementos de nuestras pàginas es mediante los atributos onClick, onMouseOver, etc. Esto lo que logra es que nuestra presentaciòn (elementos HTML, que definen el contenido) se “mezclen” con el comportamiento(scritps javascript). Un ejemplo de esta práctica podrìa ser:

<html>    <head><title>Test</title>

<link type="javascript" rel="text/javascript" href="funciones.js">

</head>

<body>

<img id="agrandar" src="lupa_agrandar.png" onClick="agrandarTexto()"/>

<img id="achicar" src="lupa_achicar.png" onClick="achicarTexto()"/>

<p class="Texto">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

Esto lo que genera es mezclar mucho javascript con HTML. En este ejemplo no se llega a notar ya que es muy simple, pero toma fundamental importancia en aplicaciones web ricas (Rich Internet Applications – RIA) y que utilizan AJAX.

Una soluciòn es agregar handlers a cada tipo de evento a los elementos a travès de su id. Nuestro ejemplo quedìa asì:

<html>    <head><title>Test</title>

<link type="javascript" rel="text/javascript" href="funciones.js">

</head>

<body>

<img id="agrandar" src="lupa_agrandar.png"/>

<img id="achicar" src="lupa_achicar.png"/>

<p class="Texto">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

Y el archivo js quedarìa parecido a:

function agrandar() {...}function achicar() {...}var agrandar = document.getElementById("agrandar");addEvent(agrandar, "click", agrandar);

var achicar = document.getElementById("achicar");

addEvent(agrandar, "click", achicar);

Bueno la màgia aquì està en la funciòn addEvent(), que es el propòsito del post .

Hay MUCHISIMAS implementaciones de esta funciòn. Actualmente no estoy usando ninguna, pero por los proyectos si las utilizan saque como conclusiòn que estas son dos de las mejorcitas:

Dean Edwards – addEvent() – My Solution que luego publicò este otro post addEvent() – Follow Up
Tino Zijdel – addEvent() – new style

Y por ùltimo querìa nombrar un concurso sobre esta funciòn: PPK’s addEvent() Recoding Contest aquì podràn encontrar MUCHAS soluciones alternativas.

Saludos y happy coding!!! (con javascript no intrusivo

javascript-addevent « WordPress.com Tag Feed

Javascript addEvent() simplificado y crossbrowser