javascript更改事件行为答案

【问题标题】：javascript change event behaviorjavascript更改事件行为
【发布时间】：2017-10-25 19:28:28
【问题描述】：

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

我的问题是，当我点击搜索框时，输入框的值从某处变为空，那为什么不触发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>

【问题讨论】：

您使用 JavaScript 所做的更改不会导致“更改”事件。

标签： javascript jquery html css dom

【解决方案1】：

这是因为事件仅由用户输入引发。以编程方式更改输入的值不会引发事件。如果你想要一个发生，那么你需要手动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...">

【讨论】：

但是混合它们真的很糟糕吗？听说使用纯 js 可以提高性能，但有些 jQuery 函数确实派上用场，有时很难不使用。
这就是为什么最好使用其中一个。如果您只使用纯 JS，您可以获得性能，但代价是编写更多代码。如果您使用 jQuery，您会损失一点性能，但可以编写更少的代码。如果您同时使用两者，那么您将抵消所有好处。

【解决方案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());
});

【讨论】：

【解决方案3】：

当占位符从不改变文本框值的搜索输入中移除时，它只是隐藏了占位符。

【讨论】：