Question

我一直在写一个插件，我真的很喜欢这种格式

Function.prototype._onClick = function() {
  // do something
}

Fuction.prototype.addListner = function() {
   this.$element.on('click', this._onClick.bind(this));
}

问题是有时我需要点击元素和主要对象。如下所示我松开dom元素而不使用bind会失去主要对象。

Fuction.prototype.addListner {
  this.$element.find('.some-class').on('click', this._onClick.bind(this));
}

要实现这一目标，我将回到丑陋的版本

    Fuction.prototype.addListner = function() {
      var self = this;
      this.$element.find('.some-class').on('click', function() {
        self._onClick($(this));   
      });
   }

有没有更好的方法呢？

Answer 1

作为zerkms，您可以使用event.target来实现您想要的效果。

使用.on时，处理程序为：

处理程序


类型：Function（Event eventObject [，Anything extraParameter] [，...   ]）触发事件时执行的函数。值false   也允许作为简单返回的函数的简写   假的。

因此，您的_onClick函数将接收click事件作为其第一个参数，然后从event.target，您现在可以获得所点击的项目。

＆＃13;

var Test = function(sel) {
  this.$element = $(sel);
  this.value = 'My value is ' + this.$element.data('val');
};

Test.prototype.addListner = function() {
  this.$element.find('.some-class').on('click', this._onClick.bind(this));
}

Test.prototype._onClick = function(evt) {
  // Get the target which is being clicked.
   var $taget = $(evt.target);
   //
   console.log(this.value);
  // use $target to get the clicke item.
   console.log($taget.data('val'));
}




var test = new Test('#test');
test.addListner();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="test" data-val="divVal">
  <button class="some-class" data-val="Button-A">btnA</button>
  <button class="some-class" data-val="Button-B">btnB</button>
</div>

＆＃13;

在事件侦听器中使用绑定功能

1 个答案: