XF 2.1 onChange with XF JS framework?

[abdfahim]

I am following this link to write onClick and onChange functionality with JS framework .

onClick seems to be easy, but I couldn't find any way to implement onChange

Isn't that even possible available? I am trying to mimic the following

jQuery("#mySel").change(function() {
        alert('aaa');
    });

 

[Jaxel]

    myAddon.select = XF.Element.newHandler(
    {
        init: function()
        {
            this.$target.on('change', $.proxy(this, 'change'));
        },
      
        change: function(e)
        {
            alert('aaa');
        },
    });

 

[Jeremy P]

The click handler system in 2.0 has been abstracted to a more generic event handler system in 2.1+. You can do something like this:

var Vendor = window.Vendor || {};

/** @param {jQuery} $ */
!(function($, window, document, _undefined) {
  'use strict';

  Vendor.ChangeHandler = XF.Event.newHandler({
    eventType: 'change',
    eventNameSpace: 'VendorChangeHandler',

    init: function() {
      console.debug('handler initialized');
    },

    change: function(event) {
      console.debug(event);
    },
  });

  XF.Event.register('change', 'vendor-change-handler', 'Vendor.ChangeHandler');
})(jQuery, window, document);

<xf:textbox data-xf-change="vendor-change-handler" />

The advantage of using the event handler system over the normal element handler system is that the event handlers are lazy loaded when the event is triggered, speeding up page initialization.