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.