企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 事件监听 语法:form.on('event(过滤器值)', callback); form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下: event 描述 select 监听select下拉选择事件 checkbox 监听checkbox复选框勾选事件 switch 监听checkbox复选框开关事件 radio 监听radio单选框事件 submit 监听表单提交事件 默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。 如: ~~~ <select lay-filter="test"></select> ~~~ ~~~ form.on('select(test)', function(data){ console.log(data); console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); ~~~ > 请注意:如果你想监听所有的select,去掉过滤器(filter)即可。下面将不再对此进行备注。 > ## 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对象 }); ~~~ ## 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对象 }); ~~~ ## radio ~~~ form.on('radio(filter)', function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.value); //被点击的radio的value值 }); ~~~ ## submit ~~~ 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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); ~~~ 再次温馨提示:上述的submit(*)中的 * 号为事件过滤器的值,是在你绑定执行提交的元素时设定的,如: ~~~ <button lay-submit lay-filter="*">提交</button> ~~~ 你可以把*号换成任意的值,如:lay-filter="go",但监听事件时也要改成 form.on('submit(go)', callback); ## bind ~~~ $("#total_price").bind('input propertychange', function() { $(this).val($(this).val().replace(/[^\d\.]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')); cont(); }); ~~~ ## ~~~ 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对象 console.log(data.elem.name); //得到美化后的DOM对象 var tag = $(data.elem).find("option:selected").attr("tag"); ~~~