input搜索框如何实现防抖?如何实现中文输入?

input搜索框相信大家在开发中用的很多，那么input框输入的事件大家用的是什么呢？大家肯定都使用过oninput或者onchange事件。

oninput

搜索框输入事件，是DOM0级别事件，只要用户输入内容就会触发，即便输入中文输入法还没有将中文汉字填入搜索框内也会一直触发。事件绑定代码示例如下

// DOM0级别事件绑定
dom.oninput = function (e) {
    console.log(e);
}

// DOM2级别事件绑定
dom.addEventListenter('input',  function (e) {
    console.log(e);
});

onchange

搜索框内容变更事件，也是DOM0级别事件，在搜索框内容改变，并且失去焦点的时候触发。注意，它是在失去焦点时才触发的。事件绑定代码如下

// DOM0级别事件绑定
dom.onchange = function (e) {
    console.log(e);
}

// DOM2级别事件绑定
dom.addEventListener('change', function (e) {
    console.log(e);
});

输入中文如何实现

想必大家发现了，如果我要输入中文该怎么办呢？当在输入法中打字时，我们不希望不断的触发input事件，而是希望在打完并且选择了相应的汉字时才触发事件。

此时我们可以使用compositionstart、compositionupdate和compositionend事件来实现。

compositionstart：在中文输入的开始时触发一次
compositionupdate：在中文输入过程中不断触发，效果类似oninput事件
compositionend：在输入完毕通过输入法选择中文汉字填入搜索框时触发一次

注意：这三个事件是DOM2级别事件，无法通过dom.oncompositionstart = function (e) {}的形式添加，只能通过addEventListener('compositionstart', function (e) {})添加监听处理。可以在start和end事件中，分别在dom对象上添加锁的方式，来限制oninput事件的执行，甚至可以不需要监听input事件。示例如下

    var dom = document.getElementById('xx');
    
    dom.oninput = function (e) {
        if (!e.target.composing) {          
            console.log('input');
        }
        console.log(e);
    }
    
    dom.onchange = function (e) {
        console.log(e);
    }
    
    dom.addEventListener('change', function (e) {
        console.log('changed');
    });
    
    dom.addEventListener('compositionstart', function (e) {
        console.log('start');
        e.target.composing = true;
    });
    
    dom.addEventListener('compositionend', function (e) {
        console.log('end');
        e.target.composing = false;
        
               // 手动触发input事件
        var event = new Event('input');
        e.target.dispatchEvent(event);
    });
    
    xx.addEventListener('compositionupdate', function (e) {
        console.log('update');
    });

至于防抖函数，在我的其他文章内有讲到，不再赘述。

function debounce(fn, delay) {
    let timerid;
    
    return function (...args) {
        if (timerid) {
            clearTimeout(timerid);
            timerid = null;
        }
        
        timerid = setTimeout(() => {
            fn(...args);
            timerid = null;
        }, delay);
    }
}