# 事件監聽
語法: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");
~~~