用户操作指引introjs 点击下一步事件处理

introjs是一款对用户进行网站操作进行指引的js库，在实际的项目开发中， 会遇到需要在点击下一步的时候，根据当前所在步骤进行额外事件操作的需求。
但是官方网站在对Events进行介绍时，只介绍了一个onbeforeexit事件。 对于这种情况，我是严重怀疑的，通过使用F12开发者工具，我发现introjs的事件还真不少。

introjs全部事件列表

  • onbeforechange
  • onchange
  • onafterchange
  • oncomplete
  • onhintsadded
  • onhintclick
  • onhintclose
  • onexit
  • onskip
  • onbeforeexit

回调事件：

代码实现

var introjs = introJs().setOptions({
    tooltipClass: 'customTooltip',
    disableInteraction: true,
    steps: [
        {
            element: $('#events').get(0),
            intro: '事件列表',
            position: 'bottom'
        },
        {
            element: $('#events li:nth-of-type(1)').get(0),
            intro: '事件名：' + $('#events li:nth-of-type(1)').text(),
            position: 'top'
        },
        {
            element: $('#events li:nth-of-type(2)').get(0),
            intro: '事件名：' + $('#events li:nth-of-type(2)').text(),
            position: 'top'
        },
        {
            element: $('#events li:nth-of-type(3)').get(0),
            intro: '事件名：' + $('#events li:nth-of-type(3)').text(),
            position: 'top'
        },
        {
            element: $('#events li:nth-of-type(4)').get(0),
            intro: '事件名：' + $('#events li:nth-of-type(4)').text(),
            position: 'top'
        }]
});
introjs.onbeforechange(function () {
    switch (this._currentStep) {
        case 1:
            $('#callback').text($('#events li:nth-of-type(1)').text());
            break;
        case 2:
            $('#callback').text($('#events li:nth-of-type(2)').text());
            break;
        case 3:
            $('#callback').text($('#events li:nth-of-type(3)').text());
            break;
        case 4:
            $('#callback').text($('#events li:nth-of-type(4)').text());
            break;
    }
});
$('#run').on('click', function () {
    introjs.start();
});