1. 程式人生 > >oninput事件、onchange事件區別

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