有人可以向我解释一下我的 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>最佳答案
这是因为事件仅从用户输入中引发。以编程方式更改输入的值不会引发事件。如果你想让它发生，那么你需要手动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...">关于javascript 更改事件行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46940627/