是不是可以理解 javascript 的自定义事件就是函数调用?

2014-04-15 13:50:04 +08:00
 xiaomajia008
js自定义事件

xxx.bind('myevent',function(){});


调用

xxx.trigger('myevent');

在我理解看来其实就是函数的调用啊...为什么要有自定义事件的概念呢? 有何更高级的用法?
2807 次点击
所在节点    程序员
7 条回复
zythum
2014-04-15 13:54:56 +08:00
其实是个语法糖。用于解耦。
NemoAlex
2014-04-15 14:04:22 +08:00
这个不是 JavaScript,是 jQuery
没什么奇特的,现在用 .on 比较好
yangg
2014-04-15 14:31:26 +08:00
Events are a manifestation of the observer pattern.

http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/
jsonline
2014-04-15 14:39:38 +08:00
程序员通过添加中间层解决问题。
这里的问题是多个模块相互发消息,中间层是事件系统。
就是所谓的订阅发布模式。
davepkxxx
2014-04-15 17:38:04 +08:00
Mutoo
2014-04-16 09:16:49 +08:00
假设你有一个时钟模块,clock。一般情况你会这样写

clock.tick = function() {
  // update time ...

  /* display time */
  $("#clock").val(clock.getTime());
};

这里的 $("#clock").val() 就是一个很直观的函数调用。

但是这样做的话,这个模块和界面元素"#clock"产生了耦合(coupling)。
也就是说,这段代码与一个叫"clock"的div产生了紧密关联,你没办法把它用在其它地方(当然除非你把"#clock"一起搬运)。

为了让clock模块更具有通用性,需要为它解耦。目的是可以在不同的地方很方便使用这个模块。所以引入了一种设计模式,叫“观察者”模式。

clock.tick = function() {
  // update time

  /* dispatch time */
  clock.trigger("tick", clock.getTime());
};

现在 clock 已经不关心它应该去更新哪些界面组件了。它要做的只是“告知”时间的变更。
那么谁应该更新界面组件呢?当然是界面组件自己啊。他们可以主动“关心”时间变更这个事件,然后对自己的内容进行修改:

clock.bind("tick", function(new_time){
  $("#clock").val(new_time);
});

于是这个 clock 模块与界面元素成功解耦,你可以把它用在不同的项目里面。我们也可以在同一个项目里很方便的增加一些新的“订阅者”:

clock.bind("tick", function(new_time){
  console.log(new_time);
});
xgod
2014-04-16 19:16:24 +08:00
简单理解:
一个方法名则只能调用一个代码块,理解为:做一个行为。
一个事件标识,可以绑定多个代码块,理解为:当发生什么事时,做一个行为或多个行为,当然也可以什么都不做。
xxx.bind('myevent',function(){console.log('action1')});
xxx.bind('myevent',function(){console.log('action2')});
xxx.trigger('myevent'); // action1,acion2

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/108651

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX