JavaScript原生实现事件监听及手动触发

悠悠 2023-03-02 13:22 18阅读 0赞

我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件.

jquery实现方法就是trigger('eventType')

原生实现:

document.querySelector('#chk').addEventListener('change', function() {
        console.log(this.checked);
        console.log('1111');
        // 执行其他逻辑处理
        
    });

如果用户手动点击多选框,可以实现多选框的选中与取消选中, 并触发监听事件.

假如多选框默认为取消选中状态, 但是经过逻辑处理之后发现需要通过js将多选框选中, 所以执行以下方法

document.getElementById('chk').checked = true;

不要通过修改多选框的checked属性来标记多选框的选中状态, 那个属性只代表多选框的默认选中状态, 如果checked="checked"表明多选框默认选中, 否则默认不选中. 其他标签的checked, selected属性也一样都代表默认选中.

通过以上的执行, 虽然页面多选框被选中了, 但是监听事件并没有被触发, 监听事件回调的一些逻辑处理就没有执行, 这会造成一些错误.我们需要手动触发监听事件.

// 第一种, createEvent和initEvent在MDN上显示被废弃了,并且会被移除,尽量不要使用
    var ev = document.createEvent('Events');
    ev.initEvent('change', true, true);
    document.querySelector('#chk').dispatchEvent(ev);
    
    // 第二种
    var ev = new Event('change', {
        bubbles: false, // 默认值false, 事件是否冒泡
        cancelable: false,  // 默认值false, 事件能否被取消
        composed: false  // 默认值false, 事件是否会在影子DOM根节点之外触发侦听器。
    });
    document.querySelector('#chk').dispatchEvent(ev);

这样监听事件就会触发,并且打印true和1111.