Question

有人可以在我的javascript代码中向我解释change事件的行为吗？我有两个事件监听器附加到搜索输入框，所以当输入的值改变时，它打印更改的值;当输入框点击时，它会清空该值。

我的问题是，当我点击搜索框时，输入框的值从某些内容变为空，那么为什么不触发change事件呢？

＆＃13;

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(' ');
})

＆＃13;

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;
    }
}

＆＃13;

<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>

＆＃13;

Answer 1

这是因为事件只是从用户输入引发的。以编程方式更改输入的值不会引发事件。如果你想要一个，那么你需要手动after，如下所示：

trigger()

另请注意，您正在使用普通JS和jQuery的奇怪组合。坚持一个或另一个更好的做法。当你加载jQuery时，你也可以使用它：

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

$(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');
    }
  });
})

Answer 2

我通常不会在文本或文本区域输入中使用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());
});

Answer 3

当从搜索输入中删除占位符而不更改文本框的值时，它只隐藏占位符。

javascript更改事件行为

3 个答案: