我正在尝试创建一个 html 页面并通过原型(prototype)对象添加一些 javascript 事件处理，因此理论上我们会:
1:一个标准的 html 页面，它将创建一个原型(prototype)对象并在主体的“onLoad”事件期间调用原型(prototype)函数。
在此示例中，我想捕获文本框更改事件，但实际页面将具有相当数量的控件。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="jquery-1.10.2.js"></script> <script src="jquery.blockUI.js"></script> <script src="jquery.mobile-1.3.2.js"></script> <script src="searchAddress.js"></script> <script> function loadIt() { SearchAddressController = new SearchAddressControllerBase; SearchAddressController.BindTheCotrols(); } </script> </head> <body onload="loadIt()"> <input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" /> <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" /> <button></button> </body> </html>
searchAddress.js 中的代码是
var SearchAddressControllerBase = function () {
this.houseNumber = null;
this.postCode = null;
};
SearchAddressControllerBase.prototype.GeneralEventHandler = function (c, e) {
// would like the text boxes change event to land here...
}
SearchAddressControllerBase.prototype.BindTheCotrols = function () {
// bind the controls here
$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));
};
我需要在 html 和 js 之间创建这种分离，因为它最终会生成而不是手动生成。
任何帮助解释我如何获得 BindTheControls 函数来为 textHouseNo 路由到 GeneralEventHandler 的更改事件将不胜感激。
我一直在查看的一些链接是: Advantages of using prototype, vs defining methods straight in the constructor? 和 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
最佳答案
你们真的很接近；当你这样做时:
$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));
您实际上是立即调用GeneralEventHandler，而不是将其分配给更改事件。 您需要将其更改为:
$("#textHouseNo").change(this.GeneralEventHandler);
然后在处理程序方法中，您可以获取有关事件的信息，如下所示:
function (evt) {
var el = evt.currentTarget
var type = evt.type;
var id = el.id
var val = el.value
console.log(id, type, val)
}
查看工作演示
var SearchAddressControllerBase = function () {
this.houseNumber = null;
this.postCode = null;
};
SearchAddressControllerBase.prototype.GeneralEventHandler = function (evt) {
// would like the text boxes change event to land here...
var el = evt.currentTarget
var type = evt.type;
var id = el.id
var val = el.value
console.log(id, type, val)
}
SearchAddressControllerBase.prototype.BindTheCotrols = function () {
// bind the controls here
$("#textHouseNo").change(this.GeneralEventHandler);
};
function loadIt() {
SearchAddressController = new SearchAddressControllerBase;
SearchAddressController.BindTheCotrols();
}
// would be called from "onload"
loadIt()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" />
<input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" />
<button></button>关于javascript - 如何将控制事件绑定(bind)到使用 javascript 原型(prototype)声明的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39666156/