将对象的方法绑定到元素的事件

Bind a method of an object to an event of an element

本文关键字：元素 事件 方法 对象 绑定      更新时间：2023-09-26

我想将对象的方法绑定到元素的事件。例如：

function ABC()
{
   this.events_list = function() {
   }
   this.events_list.clickElement = function() {
      alert("hello world");
   }
   this.bindEvents() = function() {
       $("#element").click(this.events_list.clickElement);
   }
}
var _abc = ABC();
_abc.bindEvents();

上面的代码没有将click事件绑定到clickElement方法。

this.bindEvents() = function() {

去掉第一组括号，它们没有意义。

this.bindEvents = function() {

您还需要使用new ABC()来构造一个新的ABC对象；单独的ABC()会将this绑定到全局对象，这绝对不是您想要的。

此外，如果this.events_list实际上不是一个函数，而是其他函数的容器，那么不要将其作为函数。

this.events_list = {};

最后，请记住使用分号。

在调用_abc.bindEvents()之前是否存在#element。你可以将其全部包装在中

$(document).ready(function() {
    var _abc = ABC();
    _abc.bindEvents();
});
function ABC()
{
   this.events_list = function() {
   }
   this.events_list.clickElement = function() {
      alert("hello world");
   }
   this.bindEvents() = function() {
       $("#element").click(this.events_list.clickElement);
   }
}

需要查看更多的用例才能做更多的工作。

jQuery插件将省去您的头痛，而且编写起来很简单：

<input type="checkbox" name="chk1" class="clickable" />check me<br />
<div name="item 2" class="clickable">click me<div>

使以上每个项目都可以点击：

(function( $ ) {
  $.fn.bindevents = function() {
   events_list = {
    clickElement : function() {
            alert("hello world from " + $(this).attr('name'));
    }
   };
   this.each(function() {
    $(this).bind('click', events_list.clickElement);
   });
 };
})( jQuery );
$('.clickable').bindevents();
相关文章：