javascript - 在事件监听器中使用绑定(bind)函数

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 时，处理程序是:

• handler

Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] ) A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

所以你的 _onClick 函数将接收点击事件作为它的第一个参数，然后从 event.target，你现在可以得到被点击的项目。

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

<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>