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

Question

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

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();

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

Answer 1

this.bindEvents() = function() {

取出第一组括号，它们没有意义。

this.bindEvents = function() {

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

另外， ifthis.events_list实际上不应该是一个函数，而是其他函数的容器，不要让它成为一个函数。

this.events_list = {};

最后，请记住使用分号。

Answer 2

在你#element调用之前确实存在_abc.bindEvents()。你可以把它全部包起来

$(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);
   }
}

需要查看更多用例才能做更多事情。

Answer 3

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();