javascript - 非 DOM 元素上的事件监听器

Question

我正在尝试实现一个小的 MVC 框架，现在我正在实现 View 模型绑定(bind)器，我的意思是，当模型发生变化时，触发刷新/渲染/模型上的任何内容。所以，我需要一个对象的事件监听器:

model.on("customEvent",appendItem);

$("#button").on("click",function(){
    model.add(item);
    model.trigger("customEvent");
});

function appendItem(item) {
   $("#content").append(item.toHTML());
}

那么如何在对象上创建我的事件监听器呢？

Answer 1

如果您已经在使用 jQuery，则可以使用其内置的事件处理工具。

一个鲜为人知的事实是，您还可以将任何类型的 Javascript 对象放入 jQuery 集合中，而不仅仅是 DOM 元素。然后，您可以使用一组有限的 jQuery 方法(.data()、.prop()、.on()、 .off()、.trigger() 和 .triggerHandler()) 在这些对象上。

//create the model - it can be any kind of object
var model = {};

//pass it to the jQuery function and you have a jQuery collection
//you can put an event handler on the object
$(model).on('customEvent', function () { console.log('hehe'); });

//and trigger it
$(model).trigger('customEvent');

• 阅读更多 in the Manual
• 试试 Demo