привязать событие мыши к объекту javascript

Question

Есть ли способ привязать событие мыши, такое как 'mouseover', к объекту JavaScript?

function test(x,y,z){
   this.x = x;
   this.y = y;
   this.z = z;
   this.add = function(){
       $('body').append("<div id='"+this.z+"'>test: x:"+this.x" y:"+this.y"</div>");
   }
   return this.add();
}

t1 = new test(1,2,3);
t2 = new test(2,3,4);

В моем коде у меня есть класс / объекты, определенные в следующей структуре, есть ли способприсоединить прослушиватель событий к добавленному div, но иметь возможность доступа к свойствам объекта.

Answer 1

Вы можете сделать это после того, как добавили его в тело, поэтому в вашей функции this.add вы можете связать свои события:

$("#"+this.z).mouseover(function(){
     // Function
});

Но вы знаете, ID не может начинаться с цифры, верно?

Сделайте это, если хотите использовать this.z. Я использую div[0], потому что все объекты jQuery являются массивами, поэтому 0-й элемент - это элемент, который я только что создал.

function test(x,y,z){
   var div = $("<div id='"+this.z+"'>test: x:"+this.x+" y:"+this.y+"</div>").appendTo("body");
   div[0].y = y;
   div[0].x = x;
   div[0].z = z;
   div.mouseover(function(){
       alert(this.x);
   });

   return div;
}

t1 = new test(1,2,3);
t2 = new test(2,3,4);

Answer 2

Не добавляйте элементы в DOM страницы через JavaScript с использованием HTML.

HTML предназначен для содержимого , поскольку JavaScript предназначен для поведения .Важное правило для хорошего кода.

Просто создайте свой элемент DIV (это будет обычный объект) и делайте с ним что угодно, от добавления до добавления прослушивателей событий.

var div = document.createElement('div');

div.setAttribute('id', 'foobar');
div.textContent = 'lol';

div.addEventListener('mouseover', myEventCallback, false);

document.body.appendChild(div);

Используя приличную библиотеку JavaScript, вы можете сократить приведенное выше до двух строк чистого кода.