Как правильно вызвать метод внутри класса?

[Крот]

Привет.

Задача: Есть div c id="uid", при наведении на него мышкой - содержимое div'а должно меняться на "Курсор находится на мне!". Если после этого убрать курсор - содержимое должно меняться на "Вы убрали курсор". Реализовать нужно через "класс", без использования глобальных переменных.

Вроде бы всё сделал, но никак не получается внутри класса забиндить собитие для элемента, которое бы вызывало один из методов класса.

PS: Для биндинга event'ов и операций с DOM - использую jQuery.

<div id="uid">Наведи на меня мышку...</div>

<script>
	function MyClass(el) {

		this.el = el;
		this.privet = "Курсор находится на мне!";
		this.poka = "Вы убрали курсор!";
		
		/* Вот тут я пытаюсь забиндить вызов метода класса на убирание курсора с элемента. */
		this.el.mouseleave(function() {
			this.sayPoka();
		});
		
		this.sayPrivet = function() {
			this.el.html(this.privet);
		}
		
		this.sayPoka = function() {
			this.el.html(this.poka);
		}
		
	}

	$("#uid").mouseenter(function() {
	
		my_class = new MyClass($(this));
		my_class.sayPrivet();
	
	});
</script>

Подскажите пожалуйста как лучше сделать?
Возможно что-то вообще неправильно делаю, не лучшим образом.

Спасибо!

[Riim]

mouseenter

такое точно есть?

[Крот]

такое точно есть?

Это из jQuery
http://docs.jquery.com/Events/mouseenter#fn

[Riim]

$("#uid").mouseenter(function() {

my_class = new MyClass($(this));

экземпляр создается много раз - это плохо.

[Крот]

экземпляр создается много раз - это плохо.

А как сделать так, чтобы создавался один экземпляр на каждый элемент?

Т.е. допустим, у меня 10 таких div'ов и на каждый нужно создать экземпляр получается. Один экземпляр не катит, т.к. в реальной задаче каждый экземпляр класса будет отличаться от другого параметрами, которые будут задаваться при создании класса.

[Riim]

Нужно 1 экземпляр на 1 элемент, а у вас 1 экземпляр на 1 событие.

[Крот]

Нужно 1 экземпляр на 1 элемент, а у вас 1 экземпляр на 1 событие.

А как сделать, не подскажешь?
Я никак не пойму как это сделать без глобальных переменных.

[Riim]

Примерно так (псевдокод):

var MyClass = function(elem) {
	this.elem = $(elem);
	var self = this;
	Event.add(this.elem, 'mouseover', function() {self.mouseover()});
	Event.add(this.elem, 'mouseout', function() {self.mouseout()});
};

MyClass.prototype.mouseover = function() {
	this.elem.innerHTML = 'over';
};

MyClass.prototype.mouseout = function() {
	this.elem.innerHTML = 'out';
};

$.ready(function() {
	new MyClass('div1');
});

[Крот]

Event.add(this.elem, 'mouseover', function() {self.mouseover()});
	Event.add(this.elem, 'mouseout', function() {self.mouseout()});

Странно, а почему тогда в моём примере не работает через self

var self = this;
this.el.mouseleave(function() {
  self.sayPoka();
});

А вообще конечно Спасибо, буду экспериментировать!

[Riim]

Странно, а почему тогда в моём примере не работает через self

что alert выводит:

var self = this;
this.el.mouseleave(function() {
  alert(self);
  alert(self.sayPoka);
  self.sayPoka();
});

?