javascript更改事件行为
[英]javascript change event behavior
问题描述
Can someone explain to me the behavior of change event in my javascript code? 
有人可以在我的javascript代码中向我解释change事件的行为吗？ I have two event-listeners attached to the search input box so when the value of input changed it print the changed value; 我有两个事件监听器附加到搜索输入框，所以当输入值改变时，它打印更改的值; when input box is clicked it empties the value. 单击输入框时，会清空该值。
My question is when I click the search box the value of input box changed from something to empty, so why doesn't it trigger change event? 我的问题是，当我点击搜索框时，输入框的值从某个东西变为空，那么为什么不触发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
It's because events are only raised from user input. 这是因为事件只是从用户输入引发的。 Programmatically changing the value of an input doesn't raise an event. 以编程方式更改输入的值不会引发事件。 If you want one to occur, then you need to trigger() it manually, like this: 如果你想要一个发生，那么你需要手动trigger()它，如下所示：
var search = document.querySelector("#search");
search.addEventListener("click", function(){
console.log("click event occur");
$("#search").val('').trigger('change');
})
Also note that you're using an odd mix of plain JS and jQuery. 另请注意，您正在使用普通JS和jQuery的奇怪组合。 It's better practice to stick to one or the other. 坚持一个或另一个更好的做法。 As you've loaded jQuery, you may as well use it: 当你加载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
I usually dont use change event with text or text-area input. 我通常不使用带有文本或文本区域输入的change事件。 I use propertychange 我使用propertychange
var search = document.querySelector("#search");
search.addEventListener("propertychange ",function(){
console.log("change event occur");
console.log($("#search").val());
});
Or with jquery you can use propertychange event like this: 或者使用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.