如何判断Choices JS组件的change事件来自移除按钮还是选项变更？

Choices JS组件在选择项目和移除项目时都会触发原生change事件，但可以通过两种方式区分操作类型：

方法1：直接监听Choices自定义事件 #

Choices实例提供了专门的事件用于监听添加/选择、移除操作，无需依赖原生change事件，直接分别处理即可：

// 监听选项添加/选择事件
choicePaisDivisaoAdministrativa.on('addItem', function(event) {
    // 编写选择项目时的业务代码
    console.log('选项被选中/添加', event);
});

// 监听选项移除事件
choicePaisDivisaoAdministrativa.on('removeItem', function(event) {
    // 编写移除项目时的业务代码
    console.log('选项被移除', event);
});

// 可选：监听全局change事件处理其他变更场景
choicePaisDivisaoAdministrativa.on('change', function(event) {
    // 处理其他未被上述事件覆盖的变更操作
    console.log('其他变更操作', event);
});

方法2：通过原生change事件的detail属性判断 #

如果必须使用原生change事件监听，可以通过event.detail.eventName获取Choices内部的事件类型，以此区分操作：

choicePaisDivisaoAdministrativa.passedElement.element.addEventListener(
    'change',
    function (event) {                  
        const actionType = event.detail?.eventName;
        if (actionType === 'addItem') {
            // 选择项目的业务逻辑
        }
        else if (actionType === 'removeItem') {
            // 移除项目的业务逻辑
        }
        else {
            // 其他情况的处理
        }
    },
    false,
);

说明：Choices在触发原生change事件时，会将自身的事件名称（如addItem、removeItem）存入event.detail.eventName中，通过这个字段就能精准判断操作来源。

内容的提问来源于stack exchange，提问作者masterj