关于javascript:dispatchEvent-两个特别的地方

来看一段失常的事件点击时抛错了会怎么样:

<div>
    <p>paragraph</p>
</div>
<script>
    const elem = document.querySelector('div')
    elem.addEventListener('click', function(e) {
        throw Error('test')
        console.log('1')
    })
    console.log('2')
</script>

根据事件循环原理,应该先打印2, 当点击div时,间接抛错,1不会打印。

再来看应用dispatchEvent的状况:

<div>
    <p>paragraph</p>
</div>
<script>
    const elem = document.querySelector('div')
    const event = new Event('build');
    elem.addEventListener('build', function (e) {
        console.log('0')
        throw Error('test')
        console.log('1')
    }, false);
    elem.dispatchEvent(event);
    console.log('2')
</script>

后果会打印 0,2, (1不会被打印)

这里有两个不一样的中央:

  1. 同步
    dispatchEvent后,回调会被立刻执行
  2. 谬误异样不会被流传
    dispatchEvent有个特地的中央在于,dispatchEvent进来的事件,事件回调中如果抛错了,那么谬误不会影响disPatchEvent前面的代码执行。

参考资料

  1. https://developer.mozilla.org…

肯定要看英文版的对于dispatchEvent的阐明,中文版中未对Exceptions进行很好的解释

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理