gpt4 book ai didi

javascript - 将 jQuery 对象分配给 JavaScript 对象以进行事件绑定(bind)的首选方法是什么?

转载 作者:行者123 更新时间:2023-11-28 02:14:22 26 4
gpt4 key购买 nike

示例:

我想创建一个多窗口网络应用程序。每个窗口都是一个 jQuery 对象(附加有一个 DOM 元素),但它也应该具有特定的属性和方法(例如 close()minimize() )。看来我应该创建一个类 MyWindow有属性(property)DOMElement其中将包含 jQuery 对象。

但是我如何将 DOM 事件绑定(bind)到 MyWindow对象?

我可以做类似 MyWindow.DOMElement.on('click', function(){...} 的事情。但是DOMElement不知道哪个MyWindow它被附加到并且无法在需要时操纵它的属性。例如,它将无法调用它的 MyWindowclose()方法。

我目前看到有两种方法可以解决这个问题。

首先。扩展 MyWindow.DOMElement 中的 jQuery 对象具有单一属性(property)的属性(property)myWindow这将指向该对象的父对象 MyWindow对象。

第二。使用 MyWindow 扩展 jQuery 对象。的属性并使其成为 instanceof MyWindow以及(也许通过寄生继承?)。这样,事件处理程序将可以访问 MyWindow 的所有属性和方法。通过使用this .

这两种方式看起来都有点奇怪。

将 DOM 对象分配给 Javascript 对象以进行事件绑定(bind)的首选方法是什么?

最佳答案

我基本上会按照你在第一个解决方案中所说的那样做:

MyWindow 对象包含 dom 元素的相关 jquery 对象作为其属性之一:

var MyWindow = function(params) {
this.close = function() {/*close window*/};
this.minimise = function() {/*minimise window*/};
this.$elm = $('#'+params.id);
// do all the other stuff you have to do to initialise the window

this.$elm.myWindow = this;
}

然后绑定(bind)点击:

window1 = new MyWindow({id: 'window'});
window1.$elm.on('click', function() {
this.close();
});

编辑:我最近使用的另一种方法是使用一个单独的事件处理程序,将事件路由到正确对象的正确方法,但这需要您跟踪哪些 id 对应于哪些对象如下代码所示:

var myWindows = [];

var MyWindow = function(params) {
// initialise object

myWindows[params.id] = this;
};

$(function() {
$(document).on({
click: function(e) {
var myWindow = myWindows[$(this).attr('id')];
if (typeof myWindow.click === 'function') {
myWindow.click(e);
}
}
}, '.myWindow');
};

然后,您只需向对象添加适当的方法即可绑定(bind)事件

var myWindow = new MyWindow({'id': window});

myWindow.click = function(event) {
this.close();
};

但是,这种方法的危险在于,您必须非常小心地保持 myWindows 数组最新,否则您会遇到各种内存泄漏(显然,这的难度/重要性将取决于您的应用程序的上下文) )。

关于javascript - 将 jQuery 对象分配给 JavaScript 对象以进行事件绑定(bind)的首选方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16639317/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com