這篇文章運用簡單易懂的例子給大家介紹layui事件監(jiān)聽的實現(xiàn)方法，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站制作、做網(wǎng)站、東方網(wǎng)絡推廣、重慶小程序開發(fā)、東方網(wǎng)絡營銷、東方企業(yè)策劃、東方品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供東方建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：www.chinadenli.net

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

具體語法：

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

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

一、監(jiān)聽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">寫作</option>
                <option value="1">閱讀</option>
                <option value="2">聽歌</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對象
        console.log(data.value); //得到被選中的值
        console.log(data.othis); //得到美化后的DOM對象
    });
});
</script>

同理，監(jiān)聽checkbox復選

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

監(jiān)聽switch開關：

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

監(jiān)聽radio單選：

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

監(jiān)聽submit提交：

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

關于layui事件監(jiān)聽的實現(xiàn)方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

標題名稱：layui事件監(jiān)聽的實現(xiàn)方法
鏈接URL：http://www.chinadenli.net/article2/jcodic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站改版、響應式網(wǎng)站、網(wǎng)站維護、網(wǎng)站內鏈、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)