使用object方法作为事件处理程序

Question

考虑以下代码:

var SomeObject = function (id) {
    this.id = id;    
};
SomeObject.prototype.Handler = function() { alert(this.id);};

var o = new SomeObject("bla");

$('#someDivId').on('shown.bs.modal', o.Handler);

我期待一个弹出窗口说"bla",但我得到一个弹出窗口"someDivId".

有没有办法将实例方法用作事件处理程序？

我在JavaScript中将Class方法读作事件处理程序？并使用对象的方法作为事件处理程序,如何删除它？但我无法将它们转录到我的案子中.

Answer 1

上下文this取决于谁调用该函数.在这种情况下,它由dom元素调用.

如果你在console.log(this)里面Handler会记录dom并且dom有一个id属性,所以你看到的someDivId是输出

o如果要更改上下文,则需要绑定

var SomeObject = function(id) {
  this.id = id;
};
SomeObject.prototype.Handler = function() {
  alert(this.id);
};

var o = new SomeObject("bla");

$('#someDivId').on('click', o.Handler.bind(o));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someDivId">hello</div>;

注意:shown.bs.modal此示例中的bootstrap事件由'click`替换