个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个 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/
25
4
0
以下代码，我使用 chrome 浏览器控制台进行了检查: function A(){ this.a='a' } 这是一个构造函数。我已经将一个属性 b 赋给了 A 的原型(prototype)。
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 5年前关闭。 Improve this
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 提供事实和引用来回答它. 3年前关闭。 Improve this
我已经开始阅读 The Pragmatic Programmer，我很喜欢并学习堆形式，但我很难理解示踪子弹和原型(prototype)之间的区别。跟踪项目符号是否像拥有应用程序的所有 View 但尚
尽管阅读了 StackOverflow 上的大多数文章，但我现在实际上对原型(prototype)非常困惑。 function Foo() { } Foo.prototype.speak = func
我正在阅读以下代码，并开始想知道 Rectangle.prototype = Object.create(Shape.prototype) 和 Rectangle.prototype = Shape.
我想知道它们之间的区别: childObj.prototype = Object.create(parentObj.prototype) 和 childObj.prototype = parentOb
这个问题在这里已经有了答案: Why wouldn't I use Child.prototype = Parent.Prototype rather than Child.prototype =
在 node.js 中导出原型(prototype)的首选方法是什么？您可以采用两种方法: 导出原型(prototype)本身 function A () { } module.exports = A
我正在学习 JavaScript，发现了两种分配原型(prototype)的方法。 第一个是A.prototype = B.prototype，第二个是A.prototype = new B() 例如
在一些构造函数的定义之后，例如 child ，我见过以下两种形式: Child.prototype = Parent.prototype; 或 Child.prototype = new Parent
我正在阅读一本关于 OOP javascript 的书，但被其中一个示例卡住了。 在示例代码的第一个版本中，Shape 的一个新实例构造函数被创建并且 toString方法被调用。 toString方
这个问题在这里已经有了答案: What should I connect to the child prototype property in JavaScript (2 个答案) 关闭 8 年前。
在进行原型(prototype)设计时，您在多大程度上放弃了最佳实践来支持代码和修复黑客攻击？当然，代码并不打算在完整的生产环境中保留。 补充:我正在研究一个用 Python 制作的相当大的半工作原型
我正在尝试使用 Prototype 更新隐藏表单字段的值。表单域: 我正在尝试使用原型(prototype)更新值: var additionalVal = ',2'; var itemId = $
我正在阅读How to Make a Javascript Library我发现了作者所说的一个观点: function _() { //Some obects and var
我想用一个新函数扩展“Number”类型，因此我必须定义一个原型(prototype)。当我想到这一点时，我得到了一堆问题: Number 是否既继承了 Object.prototype 又继承了 F
这里好像有区别... 假设我们有 function MyConstructor() {} MyConstructor 的[[Prototype]] 是Function.prototype，不是 MyC
有人建议 Derived.prototype = Object.create(Base.prototype); 优于 Derived.prototype = new Base(); (如 this S
我是一名优秀的程序员,十分优秀！