来看一段失常的事件点击时抛错了会怎么样:
<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 不会被打印)
这里有两个不一样的中央:
- 同步
dispatchEvent 后,回调会被立刻执行 - 谬误异样不会被流传
dispatchEvent 有个特地的中央在于,dispatchEvent 进来的事件,事件回调中如果抛错了,那么谬误不会影响 disPatchEvent 前面的代码执行。
参考资料
- https://developer.mozilla.org…
肯定要看英文版的对于 dispatchEvent 的阐明,中文版中未对 Exceptions 进行很好的解释