這篇文章將為大家詳細(xì)講解有關(guān)Layui事件監(jiān)聽的方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計團隊扎實的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗，為成都上千多家中小型企業(yè)策劃設(shè)計了網(wǎng)站。

在使用layui的form表單做驗證提交的時候，如果結(jié)合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復(fù)選

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

監(jiān)聽switch開關(guān)：

form.on('switch(filter)', function(data){　　console.log(data.elem); //得到checkbox原始DOM對象　　console.log(data.elem.checked); //開關(guān)是否開啟，true或者false　　console.log(data.value); //開關(guān)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標(biāo)簽時才會返回    console.log(data.field) //當(dāng)前容器的全部表單字段，名值對形式：{name: value}    return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。});

關(guān)于“Layui事件監(jiān)聽的方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標(biāo)題：Layui事件監(jiān)聽的方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://chinadenli.net/article42/gcghc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App開發(fā)、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計公司

廣告

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