Question

在我的Javascript和Flex应用程序中，用户经常执行我希望页面上的其他Javascript代码可以侦听的操作。例如，如果有人添加了朋友。我希望我的Javascript应用程序然后调用类似triggerEvent("addedFriend", name);的内容。然后，任何其他正在侦听“addedFriend”事件的代码都将与名称一起被调用。

是否有内置的Javascript机制来处理事件？我也可以使用jQuery，我知道jQuery广泛使用事件。但是使用jQuery，它的事件机制似乎都是基于元素的。据我所知，您必须将自定义事件绑定到元素。我想我可以做到虚拟元素，但我的需求与网页上的DOM元素无关。

我应该自己实现这个事件机制吗？

Answer 1

您有几个选择：

jQuery 确实允许您使用与文档无关的对象执行此操作。下面提供了一个示例。
如果你还没有在页面上使用jQuery，那么添加它可能有点过分。还有其他为此设计的库。您所指的模式称为 PubSub 或发布/订阅。
正如您所建议的那样，自己实施，因为如果您只关注基本功能，这并不困难。

jQuery示例：

var a = {};
jQuery(a).bind("change", function () {
    alert("I changed!");
});
jQuery(a).trigger("change");

Answer 2

我将使用带有knockjs库的MVVM模式实现此类。

Answer 3

只需创建一个元素，并在其上使用jquery事件。它可以只是一个全局变量，甚至不必连接到DOM。这样您就可以轻松完成任务，而无需任何额外的库。

Answer 4

除点击事件外，是否还可以绑定onchange事件？例如，如果调用addFriend并修改页面上的列表，则可以绑定change事件，然后调用其他功能。

  $('#addFriendButton').click( function() {
      // modify the #friendList list
  });



  $('#friendList').change( function() {
      myOtherAction();
   });

Answer 5

这是完全独立的主机，在这种情况下不需要jQuery或dom！

function CustomEvents(){
 //object holding eventhandlers
 this.handlers_ = {}; 
}
//check if the event type does not exist, create it. 
//then push new callback in array.
CustomEvents.prototype.addEventListner = function (type, callBack){
 if (!this.handlers_[type]) this.handlers_[type] = [];
  this.handlers_[type].push(callBack);
}

CustomEvents.prototype.triggerEvent = function (type){
 //trigger all handlers attached to events
 if (!this.handlers_[type]) return; 
 for (var i=0, handler; handler = this.handlers_[type][i]; i++)
 {
  //call handler function and supply all the original arguments of this function
  //minus the first argument which is the type of the event itself
  if (typeof handler === "function") handler.apply(this,arguments.slice(1));
 }

}
//delete all handlers to an event
CustomEvents.prototype.purgeEventType = function(type){
 return delete this.handlers_[type];
}

试验：

var customEvents = new CustomEvents();
customEvents.addEventListner("event A", function(arg){alert('Event A with arguments' + arg);));
customEvents.triggerEvent("event A", "the args");

编辑添加了传递

的参数

使用Javascript和jQuery监听和触发事件

5 个答案: