click binding question

Hello everyone, I'm new to all of this and I've been going through the documentation but I still dont understand how to bind click event. I have 2 files the first file is

  var editor = grapesjs.init({
    autorender: 0,
    container : '#gjs',
    components: '<input type="password" class="hello"/> <button handleClick> hello </button>', //first attemp
 components: '<input type="password" ondblclick="dbclick"/> <button handleClick> hello </button>', //second attemp
    style: '.txt-red{color: red}',
  });

and second file is

var comps = editor.DomComponents;
var defaultType = comps.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;

var inputTypes = [
  {value: 'text', name: 'Text'},
  {value: 'email', name: 'Email'},
  {value: 'password', name: 'Password'},
  {value: 'number', name: 'Number'},
];

comps.addType('input', {
  model: defaultModel.extend({
    defaults: Object.assign({}, defaultModel.prototype.defaults, {
      draggable: 'form, form *',
      droppable: false,
      traits: ['name', 'placeholder', {
          type: 'select',
          label: 'Type',
          name: 'type',
          options: inputTypes,
        },{
          type: 'checkbox',
          label: 'Required',
          name: 'required',
      }],
    }),
  },
  {
    isComponent: function(el) {
      if(el.tagName == 'INPUT'){
        return {type: 'input'};
      }
    },
  }),
  view: defaultType.view.extend({
    events: {
      click: 'handleClick',
      dblclick .hello: function(){ //this doesn't work unexpected token error
      dblick function() // this didn't seem to work either
        alert('Hi!');
      }
    },
    randomHex: function() {
      return '#' + Math.floor(Math.random()*16777216).toString(16);
    },
    handleClick: function(e) {
      this.model.set('style', {color: this.randomHex()}); // <- Affects the final HTML code
      this.el.style.backgroundColor = this.randomHex(); // <- Doesn't affect the final HTML code
    },
    render: function () {
      defaultType.view.prototype.render.apply(this, arguments);
      this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code
      return this;
    },
  }),
});

editor.render();

Does anyone have an example of binding?