> 웹 프론트엔드 > 레이이 튜토리얼 > Layui 이벤트 청취 방법

Layui 이벤트 청취 방법

풀어 주다: 2019-11-30 12:03:15
앞으로
4389명이 탐색했습니다.

Layui 이벤트 청취 방법

Laui의 Form 폼을 검증 및 제출용으로 사용할 때, Vue나 3단계 연동과 결합할 경우 이벤트 모니터링이 필요합니다.

특정 구문:

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

모니터링에 사용할 수 있음: select, checkbox, switch, radio, submit의 변경 사항

1. 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>
로그인 후 복사

마찬가지로, 모니터 체크박스 체크

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对象
});
로그인 후 복사

모니터 스위치:

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对象
});
로그인 후 복사

모니터 라디오 단일 선택:

form.on(&#39;radio(filter)&#39;, function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});
로그인 후 복사

모니터 제출 제출:

<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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
로그인 후 복사

레이유에 대한 더 많은 지식은 layui 사용법 튜토리얼 칼럼을 주목해주세요.

위 내용은 Layui 이벤트 청취 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿