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对象都是Arrays，所以第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

请避免使用JavaScript通过JavaScript向页面的DOM添加元素 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库，您可以将上面的内容减少到两行干净的代码。

将鼠标事件绑定到javascript对象

2 个答案: