在jQuery中，on方法可以为元素绑定事件，触发器方法可以手动触发事件。围绕这两种方法，我们将在jQuery中体验观察者模式。

on方法绑定内置事件并自然触发。

例如，我们将click事件绑定到页面的body元素，并编写这个。

复制代码如下： head meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/title/title script src=' http : script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $(' body ')。on ('click '，function () {。});});/script/head body h1 hello/h1/body

上图，我们只能通过点击身体来触发点击事件。也就是说，当页面元素与内置事件绑定时，事件在内置事件发生的瞬间被触发。

on方法绑定内置事件并手动触发。

使用触发器方法，还可以手动触发元素绑定的内置事件。

script src=' http : script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $(' body ')。on ('click '，function () {console.log('被单击了~ ~ '。});$(“body”)。触发器(' click ')；});/script以上，不需要点击正文，而页面加载后，正文自动触发点击事件。

on方法绑定自定义事件并手动触发它。

我们知道，click是jquery的内置事件，那么我们是否可以自定义事件并手动触发呢？

复制代码如下： script src=' http : script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $(' body ')。on ('someclick '，function () {console.log()。});$(“body”)。触发器(' some click ')；});/script

上图，我们定制了一个someclick事件，结果同上。

因此，我们发现可以将一个自定义事件绑定到一个元素，并使用触发器方法触发该事件。

当然，自定义事件的名称可以用“namespace”的形式编写。“自定义事件名称”，如app.someclick，在大型项目中特别有用，可以有效避免自定义事件名称的冲突。

从“发布订阅”的角度来看，on方法相当于订阅者和观察者，触发器方法相当于发布者。

从“异步json数据采集”体验jQuery观察者模式。

在根目录下，有一个data.json文件。

{'one' :' hello '，' two' :' world'}现在，json数据是异步获取的。

复制代码如下： script src=' http : script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $)。getjson ('data.json '，function(data){ console . log(data)；});});/script

如果使用全局变量来接收异步获取的json数据。

复制的代码如下： script src=' http : script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ vardata；$.getJSON('data.json '，function(results){ data=results；});console.log(数据)；});/script

这一次，我们得到的结果是不确定的。为什么呢？-因为，当美元。getJSON方法还在获取数据，console.log(数据)已经执行，还没有数据。

如何解决这个问题？-如果要执行的方法在$之外定义。getJSON方法，然后这个方法真的是在回调函数中触发的$。getJSON方法，岂不是解决了？

复制的代码如下： script src=' http 3360 script/jquery-2 . 1 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $)。getjson ('data.json ')，function(results) { $(document)。触发器(' app.myevent '，结果)；//相当于发布})；$(文档)。打开(' app。myevent '，函数(e，results){//相当于订阅console . log(results)；});});/script

上图中，on方法就像一个订阅者，它订阅自定义事件app . my event；触发器方法就像发布器一样，只有在它发布事件和参数之后，订阅器方法才能真正执行。

jquery观察者模式的扩展方法。

为此，我们还可以为框架观察者模式专门写一个扩展方法。

复制代码代码如下：脚本src=' http :脚本/jquery-2。1 .1 .量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $).getJSON('data.json '，函数(结果){ $ .发布(' app.myevent '，结果);});$.subscribe('app.myevent '，function(e，results){ console。日志(结果)；});});（函数($){ var o=$({ })；//自定义事件对象$.每个({ trigger: 'publish '、 'subscribe '、off: 'unsubscribe ')，函数(key，val){ jQuery[val]=function(){ o[key].适用(o，参数);};});})(jQuery)；/script

以上，定义了全局的出版和订阅方法，我们在任何时候都可以调用。

复制代码代码如下：脚本src=' http :脚本/jquery-2。1 .1 .量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $).getJSON('data.json '，函数(结果){ $ .发布(' app.myevent '，结果);});$.subscribe('app.myevent '，function(e，results) { $('body ').html(结果。一个)；});});

总结：jQuery的观察者模式，实际上是让在方法绑定的自定义事件先不执行，直到使用引发方法来触发事件。使用框架的观察者模式的好处是：一次发布，多次订阅。