javascript更改事件行为
[英]javascript change event behavior
问题描述
有人可以在我的javascript代码中向我解释change事件的行为吗？ 我有两个事件监听器附加到搜索输入框，所以当输入值改变时，它打印更改的值; 单击输入框时，会清空该值。
我的问题是，当我点击搜索框时，输入框的值从某个东西变为空，那么为什么不触发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>
3 个解决方案
解决方案1
4 已采纳 2017-10-25 19:32:07
这是因为事件只是从用户输入引发的。 以编程方式更改输入的值不会引发事件。 如果你想要一个发生，那么你需要手动trigger()它，如下所示：
var search = document.querySelector("#search");
search.addEventListener("click", function(){
console.log("click event occur");
$("#search").val('').trigger('change');
})
另请注意，您正在使用普通JS和jQuery的奇怪组合。 坚持一个或另一个更好的做法。 当你加载jQuery时，你也可以使用它：
$(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...">
解决方案2
2 2017-10-25 19:31:40
我通常不使用带有文本或文本区域输入的change事件。 我使用propertychange
var search = document.querySelector("#search");
search.addEventListener("propertychange ",function(){
console.log("change event occur");
console.log($("#search").val());
});
或者使用jquery，你可以像这样使用propertychange事件：
$("#search").bind('input propertychange', function(){
console.log("change event occur");
console.log($("#search").val());
});
解决方案3
0 2017-10-25 19:32:29
当占位符从搜索输入中删除而不更改文本框的值时，它只隐藏占位符。
“改变”事件中的奇怪行为
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.