Reason to Use Observer Design Pattern

I'm relatively new to JavaScript and recently started learning about various design patterns. I understand how observer design pattern works but I don't quite get when to use them. Take a look at this relatively simple observer pattern:

function Observer(){
        this.listeners = {};
}
Observer.prototype.add = function(event,func){
        if(!this.listeners[event]){
        this.listeners[event] = [];
  }
  this.listeners[event].push(func)
}
Observer.prototype.remove = function(event, func){
        var ref = this.listeners[event],
  var len = ref.length;
  for(var i =0; i<len; i++){
        if(listener===func){
        ref.splice(i,1)
    }
  }
}
Observer.prototype.trigger = function(event){
  var ref = this.listeners[event];
  var len = ref.length;
  for(var i=0; i<len; len++){
        var listener = ref[i];
    if(typeof listener == 'function') {listener()}
  }
}
var observer = new Observer();
var observerFunc = function(){console.log('notified')};
observer.add("test",observerFunc)
observer.trigger("test") // logs "notified"

My question is what is the advantage of using an observer pattern like above and doing something like below with jQuery? What is the limitation with the second approach? They both invoke certain functions on occurrence of an event but I feel like I'm missing a fundamental piece.

var observer = {
        observerfunction : function(){console.log('Observer notified')}
}

$('selector').on("observerFunction", function(){
        observer.observerfunction();
})

$('selector').trigger('observerFunction');