Evento Manual VS Programático

Cómo diferenciar entre un trigger por usuario y uno programático

by Carlos Canela

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-6 text-center">
      <button class="btn" id='mi_boton'>
        Mi Botón
      </button>
    </div>
    <div class="col-sm-6 text-center">
      <button class="btn" id='otro_boton'>
        Otro Botón
      </button>
      <p>
        <small>En lugar de dar clic directo sobre <em>Mi Botón</em> lanzamos su evento manualmente en el código</small>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <div class="panel">
        <div class="panel-body" id='log'></div>
      </div>
    </div>
  </div>
</div>
<div>

</div>

JavaScript

$('#mi_boton').on('click', function(e) {
  if (e.originalEvent === undefined) {
    $("#log").append('<p><strong>#mi_boton </strong>Evento programático</p>');
  } else {
    $("#log").append('<p><strong>#mi_boton </strong>Evento por usuario</p>');
  }
})

$("#otro_boton").click(function() {
  $("#log").append('<p><strong>#otro_boton</strong> Evento <br/>Ejecutamos evento <strong>click()</strong> de <em>#mi_boton</em></p>');
  $("#mi_boton").click();
})