comportamiento de evento de cambio de JavaScript

¿Puede alguien explicarme el comportamiento del evento de change en mi código de JavaScript? Tengo dos detectores de events adjuntos al cuadro de input de búsqueda, así que cuando el valor de la input cambió , imprima el valor modificado; cuando se hace clic en el cuadro de input, vacía el valor.


Mi pregunta es cuando hago clic en el cuadro de búsqueda, el valor del cuadro de input cambió de algo a vacío, entonces, ¿por qué no activa el evento de change ?

 var search = document.querySelector("#search"); search.addEventListener("change",function(){ console.log("change event occur"); console.log($("#search").val()); }) var search = document.querySelector("#search"); search.addEventListener("click",function(){ console.log("click event occur"); $("#search").val(' '); }) 
 body,html{ background-color:#092B40; width: 100%; height: 100%; border-color: transparent; margin:0; padding:0; } .entry{ display: block; background-color: #F8ECC2; margin-top: 10px; border-radius: 3px; min-width:600px; height:90px; width: 100%; } .container{ overflow:hidden; } #search{ display:inline-block; width:50%; } #wiki{ margin-top: 0%; animation: 2s slide-up; } @keyframes slide-up{ from{ margin-top:100%; opacity:0; } to{ margin-top:0%; opacity:1; } } 
 <head> <title>Wiki Search API</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="main.css" type="text/css" /> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"> </script> </head> <body> <div class='container'> <div id='search-box' class="form-group text-center"> <input id='search' type="text" class="form-control" placeholder="Search for..."> <submit id='go-button' class='btn btn-info '>Go!</submit> <button id='random' class='btn btn-warning '><a href='https://en.wikipedia.org/wiki/Special:Random'>Random!</a></button> </div> <!--<div class='filler well'>--> <!--</div>--> <div id='wiki' class='row'> <a class="entry"> <p>Hello</p> </a> <a class="entry"> <p>Hello</p> </a> <a class="entry"> <p>Hello</p> </a> <a class="entry"> <p>Hello</p> </a> <a class="entry"> <p>Hello</p> </a> <a class="entry"> <p>Hello</p> </a> </div> </div> <script type="text/javascript" src="script.js"></script> </body> 

Es porque los events solo se generan a partir de la input del usuario. Cambiar el valor de una input de forma programática no genera un evento. Si quiere que se produzca uno, debe trigger() manualmente, así:

 var search = document.querySelector("#search"); search.addEventListener("click", function(){ console.log("click event occur"); $("#search").val('').trigger('change'); }) 

También tenga en count que está utilizando una mezcla impar de JS simple y jQuery. Es mejor seguir con uno u otro. Como has cargado jQuery, también puedes usarlo:

 $(function() { $('#search').on({ change: function() { console.log("change event occur"); console.log($(this).val()); }, click: function() { console.log("click event occur"); $(this).val('').trigger('change'); } }); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input id='search' type="text" class="form-control" placeholder="Search for..."> 

Normalmente no utilizo el evento de change con la input de text o área de text. Yo uso la propertychange

 var search = document.querySelector("#search"); search.addEventListener("propertychange ",function(){ console.log("change event occur"); console.log($("#search").val()); }); 

O con jquery puedes usar el evento propertychange como este:

 $("#search").bind('input propertychange', function(){ console.log("change event occur"); console.log($("#search").val()); }); 

Cuando se quita el marcador de position de la input de búsqueda que no está cambiando el valor del textbox, solo está ocultando el marcador de position.