Проблемма с addEventListener/attachEvent
Доброго времени суток!
Имеется базовый класс CommonClass, в конструктор которого передается id элемента. В конструкторе класса, внутри элемента с id, переданного в качестве параметра, по средствам ф-ции innerHTML вставляется другой элемент(в данном случае DIV). Свойство класса dom содержит объект DOM вставляемого элемента. Так же, базовый класс имеет несколько методов, описанных через прототипы, в частности метод addEvent, осуществляющий добавление обработчиков событий к элементу, созданному внутри конструктора класса CommomnClass. DIVClass наследник класса CommonClass. Код: function randomString(len, charSet){ charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var randomString = ''; for(var i = 0; i < len; i++){ var randomPoz = Math.floor(Math.random() * charSet.length); randomString += charSet.substring(randomPoz, randomPoz+1); } return randomString; } function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; } //// //CommonClass // function CommonClass (id){ this.guid = randomString(8); var owner = document.getElementById(id); owner.innerHTML = owner.innerHTML+(' <div id ="'+this.guid+'"></div>'); this.dom = document.getElementById(this.guid); this.content = ''; } CommonClass.prototype.draw = function(){this.dom.innerHTML = this.content;}; CommonClass.prototype.addEvent = function(event, handler, useCapture){ if (this.dom.addEventListener) { this.dom.addEventListener(event, handler, useCapture ? useCapture : false); } else if (this.dom.attachEvent) { this.dom.attachEvent('on' + event, handler); } else alert("Add handler is not supported"); }; CommonClass.prototype.removeEvent = function(event, handler) { if (this.dom.removeEventListener) { this.dom.removeEventListener(event, handler, false); } else if (this.dom.detachEvent) { this.dom.detachEvent('on' + event, handler); } else alert("Remove handler is not supported"); }; //// // DIVClass // function DIVClass(id){ DIVClass.superclass.constructor.call(this, id); } extend(DIVClass, CommonClass); DIVClass.prototype.draw = function (){ this.content = '<div style="float: left; width: 300px; height: 300px; "></div>'; DIVClass.superclass.draw.apply(this); }; Собственно проблема: Для примера рассмотрим следующий код <body> <div id = "Foo" > </div> <script> function event_a ( event ){alert('a')}; //событие а var a = new DIVClass('Foo'); //создание объекта а a.addEvent( 'mousemove', event_a ); //добавление события onMouseMove a.draw(); </script> </body> Все прекрасно работает: создается DIV, на событие onMouseMove вешается обработчик event_a При наведении мыши на созданный DIV срабатывает оное событие, видим alert('a'). Если же создать еще один объект класса DIVClass, например b <body> <div id = "Foo" > </div> <script> function event_a ( event ){alert('a')}; //событие а var a = new DIVClass('Foo'); //создание объекта а a.addEvent( 'mousemove', event_a ); //добавление события onMouseMove a.draw(); var b = new DIVClass('Foo'); </script> </body> то обработчик события event_a для объекта a перестает срабатывать Однако, если объекту b добавить обработчик события onMouseMove (или любого другого события) он будет вызван. <body> <div id = "Foo" > </div> <script> function event_a ( event ){alert('a')}; //событие а function event_b ( event ){alert('b')}; //событие b var a = new DIVClass('Foo'); //создание объекта а a.addEvent( 'mousemove', event_a ); //добавление события onMouseMove a.draw(); var b = new DIVClass('Foo'); b.addEvent( 'mousemove', event_b ); b.draw(); </script> </body> Экспериментально установлено что, сколько бы объектов не было создано обработчики событий срабатывают только для последнего созданного объекта. Уважаемые форумчане, пожалуйста помогите разобраться с проблемой и решить, каким образом сделать так, чтобы обработчики срабатывали для всех объектов а не только для последнего созданного. Большое спасибо. |
hoovers, никто не будет разбираться в стене кода, но, судя по специфике проблемы, вам нужно почитать про замыкания.
|
Часовой пояс GMT +3, время: 14:45. |