Layui事件监听的方法

1. 监听普通按钮的点击事件

我们通常使用 jQuery 或 Native JS 库来实现事件监听。

    点击我
  

    // jQuery 监听
    $('#btn').on('click', function() {
      console.log('你单击了我');
    });

    // Native JS 监听
    document.getElementById('btn').addEventListener('click', function() {
      console.log('你单击了我');
    });
  

2. 监听表格的行点击事件

表格是 LayUI 中比较重要的组件之一。

    

      

        

          
用户ID
          
用户名
          
所在城市
        
 
      
      

        

          
10001
          
张三
          
北京
        
        

          
10002
          
李四
          
上海
        
        

          
10003
          
王五
          
广州
        
      
    
  

    // 监听表格行点击事件
    layui.use('table', function(){
      var table=layui.table;
      table.on('row(layTable)', function(obj){
        console.log(obj.tr) // 得到当前行元素对象
        console.log(obj.data); // 得到当前行数据
      });
    });
  

3. 监听单选框选中事件

单选框是一组互斥的控件，选中其中一个后，其他选项自动取消选中状态。

    男
    女
  

    // 监听单选框选中状态事件
    layui.use('form', function(){
      var form=layui.form;
      form.on('radio(sex)', function(data){
        console.log(data.value); // 选中的值
      }); 
    });
  

4. 监听下拉框选中事件

下拉框，也称为选择框，提供了一个下拉列表供用户选择。

    
      
      北京
      上海
      广州
      深圳
    
  

    // 监听下拉框选中事件
    layui.use('form', function(){
      var form=layui.form;
      form.on('select(city)', function(data){
        console.log(data.value); // 选中的值
      }); 
    });