Layui中事件監(jiān)聽(tīng)的應(yīng)用

在使用layui的form表單做驗(yàn)證提交的時(shí)候，如果結(jié)合vue，或者是三級(jí)聯(lián)動(dòng)的時(shí)候，就需要做事件監(jiān)聽(tīng)了。

具體語(yǔ)法：

form.on('event(過(guò)濾器值)', callback);

可以用于監(jiān)聽(tīng)：select，checkbox，switch，radio，submit 的改變

一、監(jiān)聽(tīng)select的改變

<!-- 不用form 用div也可以 -->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">下拉選擇框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="0">寫(xiě)作</option>
                <option value="1">閱讀</option>
                <option value="2">聽(tīng)歌</option>
                <option value="4">游戲</option>
            </select>
        </div>
    </div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use('form', function(){
    var form = layui.form;
    form.on('select(aihao)',function(data){
        console.log(data);
        console.log(data.elem); //得到select原始DOM對(duì)象
        console.log(data.value); //得到被選中的值
        console.log(data.othis); //得到美化后的DOM對(duì)象
    });
});
</script>

同理，監(jiān)聽(tīng)checkbox復(fù)選

form.on('checkbox(filter)', function(data){
    console.log(data.elem); //得到checkbox原始DOM對(duì)象
    console.log(data.elem.checked); //是否被選中，true或者false
    console.log(data.value); //復(fù)選框value值，也可以通過(guò)data.elem.value得到
    console.log(data.othis); //得到美化后的DOM對(duì)象
});

監(jiān)聽(tīng)switch開(kāi)關(guān)：

form.on('switch(filter)', function(data){
　　console.log(data.elem); //得到checkbox原始DOM對(duì)象
　　console.log(data.elem.checked); //開(kāi)關(guān)是否開(kāi)啟，true或者false
　　console.log(data.value); //開(kāi)關(guān)value值，也可以通過(guò)data.elem.value得到
　　console.log(data.othis); //得到美化后的DOM對(duì)象
});

監(jiān)聽(tīng)radio單選：

form.on('radio(filter)', function(data){
    console.log(data.elem); //得到radio原始DOM對(duì)象
    console.log(data.value); //被點(diǎn)擊的radio的value值
});

監(jiān)聽(tīng)submit提交：

<button lay-submit lay-filter="*">提交</button>
form.on('submit(*)', function(data){
    console.log(data.elem) //被執(zhí)行事件的元素DOM對(duì)象，一般為button對(duì)象
    console.log(data.form) //被執(zhí)行提交的form對(duì)象，一般在存在form標(biāo)簽時(shí)才會(huì)返回
    console.log(data.field) //當(dāng)前容器的全部表單字段，名值對(duì)形式：{name: value}
    return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});

以上就是Layui事件監(jiān)聽(tīng)的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！