En un proyecto reciente, tenímos la necesidad de que, dependiendo de X factores, la función a la que llamase el evento onChange de varios combos Select debía ir cambiando:
1 2 3 4 | <select id="slSelect" onchange="alert(1)"> <option value="1">hola</option> <option value="2">que tal</option> </select> |
En mootools, tenemos varias funciones para eliminar eventos de objetos: $(element).removeEvent() y $(element).removeEvents(), pero, misteriosamente, no tienen ningún efecto cuando se aplica a un objeto de tipo Select. ¿Y si en vez de un evento, el código onchange=”alert(1)” fuera interpretado como una propiedad de objeto? Pues efectivamente, la única forma de quitar (para después añadir otro) un evento onchange es anulando la propiedad del objeto, en mootools sería así:
1 | $("slSelect").removeProperty("onchange"); |
Probado en FF3, IE6, IE7 y Safari. En la página siguiente os dejo el código del ejemplo…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>TEST</title> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" charset="utf-8"> function changeOnChange() { $("slSelect").removeProperty("onchange"); } </script> </head> <body> <select id="slSelect" onchange="alert(1)"> <option value="1">hola</option> <option value="2">que tal</option> </select> <input type="button" value="cambia onchange" onclick="changeOnChange();" /> </body> </html> |