Heim > Web-Frontend > Layui-Tutorial > Verwendung der Laui-Ereignisüberwachung

Verwendung der Laui-Ereignisüberwachung

Freigeben: 2019-11-27 13:25:38
nach vorne
4071 Leute haben es durchsucht

Verwendung der Laui-Ereignisüberwachung

Bei Verwendung des Laui-Formulars zur Überprüfung und Übermittlung ist in Kombination mit Vue oder dreistufiger Verknüpfung eine Ereignisüberwachung erforderlich.

Spezifische Syntax:

form.on('event(过滤器值)', callback);
Nach dem Login kopieren

kann verwendet werden, um Folgendes zu überwachen: Änderungen in Select, Checkbox, Switch, Radio, Submit

1. Überwachen Sie Änderungen in 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(&#39;form&#39;, function(){
    var form = layui.form;
    form.on(&#39;select(aihao)&#39;,function(data){
        console.log(data);
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
    });
});
</script>
Nach dem Login kopieren

In ähnlicher Weise überprüfen Sie das Kontrollkästchen „Überwachen“

form.on(&#39;checkbox(filter)&#39;, 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对象
});
Nach dem Login kopieren

Überwachungsschalter:

form.on(&#39;switch(filter)&#39;, 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对象
});
Nach dem Login kopieren

Überwachen Sie die Radio-Einzelauswahl:

form.on(&#39;radio(filter)&#39;, function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});
Nach dem Login kopieren

Überwachen Sie die Übermittlung:

<button lay-submit lay-filter="*">提交</button>
form.on(&#39;submit(*)&#39;, function(data){
    console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
    console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
Nach dem Login kopieren

Mehr Für mehr Wenn Sie über Laui-Kenntnisse verfügen, beachten Sie bitte die Spalte Tutorial zur Verwendung von Lauii.

Das obige ist der detaillierte Inhalt vonVerwendung der Laui-Ereignisüberwachung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage