Layui event listening methods

Release: 2019-11-30 12:03:15
forward
3999 people have browsed it

Layui event listening methods

When using layui's form form for verification and submission, if it is combined with vue or three-level linkage, event monitoring is required.

Specific syntax:

form.on('event(filter value)', callback);

Can be used to monitor: select, checkbox, switch , radio, submit changes

1. Monitoring select changes


Copy after login

Similarly, monitoring checkbox check

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对象
});
Copy after login

Monitoring switch 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对象
});
Copy after login

Monitor radio single selection:

form.on('radio(filter)', function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});
Copy after login

Monitor submit submission:


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

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Layui event listening methods. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest issues
Popular Tutorials
More>
Latest downloads
More>
web effects
Website source code
Website materials
Front end template
About us Disclaimer Sitemap
PHP Chinese website:Public welfare online PHP training,Help PHP learners grow quickly!