how an event becomes a command

1.js

$(".edit-button").on("click", (e) => {
  
  someThing.doSomeWork();
  
});

2.js

var EmployeeView = Marionette.ItemView.extend({
  // ...
  events: {
    "click .edit-button": "editClicked"
  },
  
  editClicked: function(e){
    
    // ... now what?
    
  }
});

3.js

var EmployeeView = Marionette.ItemView.extend({
  // ...
  events: {
    "click .edit-button": "editClicked"
  },
  
  editClicked: function(e){
    
    // mimic the DOM event
    this.trigger("click");
    
  }
});

4.js

var EmployeeView = Marionette.ItemView.extend({
  // ...
  events: {
    "click .edit-button": "editClicked"
  },
  
  editClicked: function(e){
    
    // trigger an event with more meaning
    this.trigger("edit");
    
  }
});

5.js

var EmployeeView = Marionette.ItemView.extend({
  // ...
  events: {
    "click .edit-button": "editClicked"
  },
  
  initialize: function(options){
    this.managementView = options.managementView;
  }
  
  editClicked: function(e){
    
    // call the object directly
    this.managementView.show();
    
  }
});