List

<fine-list id='myList1'
  config='{
    "maxHeight": "300px",
    "datasource": {
      "transport": {
        "read": {
          "url": "../../includes/getList.php",
          "type": "json"
        }
      },
      "serverFiltering": false
    },
    "clientEvents": {
      "open": "onClientOpen",
      "close": "onClientClose",
      "select": "onClientSelect",
      "change": "onClientChange",
      "before-filter": "onClientBeforeFilter",
      "before-databound": "onClientBeforeDataBound",
      "databound": "onClientDataBound"
    }
  }'>
</fine-list>

<script type="text/javascript">
  
  fine.ready(function(e) {
    var el = document.getElementById('myList1');
    fine.addListener(el, 'select', onSelect);
    fine.addListener(el, 'before-filter', onBeforeFilter);
    fine.addListener(el, 'before-databound', onBeforeDataBound);
    fine.addListener(el, 'databound', onDataBound);
  });
  
  var order = 0;
  var logDiv = fine.get('#log');
    
  function log(msg, obj) {
    order += 1;
    logDiv.innerText += order + '. ' + msg + '\n';
    logDiv.scrollTop = logDiv.scrollHeight;
    console.log(msg, obj ? obj : '');
    console.log('');
  }
  
  function onSelect(e) {
    log('myList1 after selected!', e.detail.selectObject);
  }
  
 function onClientSelect(arg) {
    log('client after selected', arg.selectObject);
  }
</script>