ugrás a tartalomhoz

addEvent + IE + this

Anonymous · 2006. Május. 14. (V), 15.34
IE alatt megoldható, hogy ha függvényt rendelek valamilyen elemhez, akkor a this változót használhassam a függvényben?

Az alábbi kód normális böngészőkben megfelelően működik, míg IE alatt undefined értéket ad.
Lehet ezen valahogyan segíteni?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">  
  3. <head><title></title>  
  4. <script type="text/javascript">  
  5. <!--  
  6. function addEvent(obj, evType, fn, useCapture) {  
  7.     if (obj.addEventListener) {  
  8.         obj.addEventListener(evType,fn,useCapture);  
  9.         return true;  
  10.     } else if(obj.attachEvent){  
  11.         return obj.attachEvent("on"+evType,fn);  
  12.     } else {  
  13.         return false;  
  14.     }  
  15. }  
  16.   
  17. function start() {  
  18.     var input = document.getElementById('hello');  
  19.     addEvent(input, 'focus', function() {alert(this.value);});  
  20. }  
  21. addEvent(window,'load',start);  
  22. -->  
  23. </script>  
  24. </head>  
  25. <body>  
  26. <form action="?" method="get">  
  27.     <fieldset>  
  28.         <input id="hello" value="hello" />  
  29.     </fieldset>  
  30. </form>  
  31. </body>  
  32. </html>  
‹ Weboldal mentese firefoxbol Ne legyen térköz a <form> elem után ›
 ■
1

Jo-ho-ho

vbence · 2006. Május. 14. (V), 21.45
Hali!

Az event objektuot mindenképpen megkapja a kezelő fügvényed, amiből ki kell piszkálni az objektumot (target).
A dolgot csöppet bonyolítja, hogy explórerben több ilyen objektum is van. Pl:
  1. <div onclick="func()">  
  2.     <img src="" alt=""/>  
  3. </div>  
Itt a kezelő a div-ben van, kérdés, hogy te a képet szeretnéd megkapni, amire fizikailag a kattintás történt, vagy az objektumot, amiben van a kezelő.

Itt egy cikk, általában ez event modellekről:
http://developer.apple.com/internet/webcontent/eventmodels.html

Itt pedig egy általam írt függvény, direkt ilyen feladatokra, ha meg akarod nézni, pontosan milen is az event objektum az aktuális böngésződben:
http://vbence.web.elte.hu/dom_objektum_info.html

Bence
2

lásd komment,link a kódban

toxin · 2006. Május. 15. (H), 10.10
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">  
  3. <head><title></title>  
  4. <script type="text/javascript">  
  5. <!--  
  6. // esemény kezelő, célja hogy ugynazazon eseményre (event) több kezelőt is tudjunk akasztani, a w3c esemény-kezelő modelljével  
  7. // kapcsolatban felmerült kétejek miatt (http://www.quirksmode.org/js/events_advanced.html), forrás koncepció   
  8. // Dave Crane 2005: eventRouter object-je , kibővítve objektumonkénti több eseménytípus támagotással,   toxin 2006    
  9. // készült : tanulmányi, kisérleti célból, nincs túl tesztelve :) (ie6,fx1.501)  
  10.   
  11. function eventRouter(el,eventType){  
  12.     this.el                                 = el;  
  13.     this.eventsArray                        = new Array();  
  14.     if (!el.eventRouter) el.eventRouter     = new Array();  
  15.     el.eventRouter[eventType]               = this;  
  16.     el[eventType]                           = this.callback;  
  17. }  
  18.   
  19. eventRouter.prototype = {  
  20.     notify : function(el,e){  
  21.         for (var i = 0;i<this.eventsArray.length;i++){  
  22.             this.eventsArray[i].call(el,e);  
  23.         }  
  24.     },  
  25.     addListener : function(listener){  
  26.         this.eventsArray[this.eventsArray.length] = listener;  
  27.   
  28.     },  
  29.     callback : function(event){  
  30.         var e=event || window.event;  
  31.         var eventRouter = this.eventRouter['on'+e.type];  
  32.         if (eventRouter){  
  33.             eventRouter.notify(this,e);  
  34.         }  
  35.     }  
  36. }  
  37.   
  38. function start() {  
  39.     var input = document.getElementById('hello');  
  40.     var inputBlurEventHandler = new eventRouter(input,'onblur');  
  41.     inputBlurEventHandler.addListener (function() {alert(this.value);});  
  42. }  
  43.   
  44. windowOnloadEventHandler = new eventRouter(window,'onload');  
  45. windowOnloadEventHandler.addListener(start);  
  46.   
  47. -->  
  48. </script>  
  49. </head>  
  50. <body>  
  51. <form action="?" method="get">  
  52.     <fieldset>  
  53.         <input id="hello" value="hello" />  
  54.     </fieldset>  
  55. </form>  
  56. </body>  
  57. </html>  
ezt lécci http://www.quirksmode.org/js/events_advanced.html kukk meg, ill. használd a fenti kódot, amennyiben beválik egészséggel :)

ui: http://toxin.hu/test2.html
3

itt a megoldás

Hodicska Gergely · 2006. Május. 15. (H), 10.13
Nézd meg itt, hogy hogyan van felhasználva az addEventHandler függvény, illetve az által meghívott függvényben hogyan kerülnek kinyerésre szabványosan az eseménnyel kapcsolatos paraméterek.

Ezenkívül érdemes lehet kipróbálni a dojo JS framework eseménykezelését, konkrétan még nem használtam, de amit olvastam róla, az alpján nagyon tetszett.


Felhő