Доброго времени суток!
Имеется базовый класс 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>
Экспериментально установлено что,
сколько бы объектов не было создано обработчики событий срабатывают только для последнего созданного объекта.
Уважаемые форумчане, пожалуйста помогите разобраться с проблемой и решить, каким образом сделать так, чтобы обработчики срабатывали для всех объектов а не только для последнего созданного.
Большое спасибо.