oninput事件、onchange事件区别

 

onchange :元素发生改变时调用，在元素失去焦点时调用方法 

onInput :元素发生改变时调用，元素变化，立即触发方法 

 

最近项目用easyUI的easyui-combobox写了一个可搜索的下拉框，但是出现一个问题：比如输入“本体”，不点空格或者回车，用鼠标选择“本体”，则不触发onchange事件，不能按输入的名称查询。

然后想到用oninput事件，虽然会浪费一点（每次都触发查询）。

events:{input: xxx_SearchBox_Name.input}

 

按名称查询:<input type="text" class="easyui-combobox" id="xxx_SearchBox_Name"
            style="width:270px" data-options="
						valueField:'id' , 
						textField:'fullpathname', 
						loader : myloader,
						mode : 'remote',
						onSelect:xxx_SearchBox_Name.onSelect,
						events:{input: xxx_SearchBox_Name.input}"  />

以下为script:

 //检索事件
  var myloader = function (param, success, error) {
        var q = param.q || '';
        if (q.length <= 0) {
            return false;
        }
        $.ajax({
            url: 'Dxxe/GxxxyName.action',
            type: 'POST',
            dataType: 'json',
            data: {'xxicName': q},
            success: function (data) {
                $('#xxx_SearchBox_Name').combobox("loadData", data);
            }
        });
    };


   // 鼠标点击的时候，也触发change事件
    xxx_SearchBox_Name.input = function () {
     	myloader({"q":this.value});
     	$('#xxx_SearchBox_Name').combobox('setValue',this.value);
    }