1.问题描述
默认情况下,dispatchEvent只触发定义在目标上以及捕获阶段的事件
var event = new Event('eventName'); document.body.addEventListener('eventName',function(){ alert('body'); }); document.addEventListener('eventName',function(){ alert('document'); }); window.addEventListener('eventName',function(){ alert('window'); },true); document.body.dispatchEvent(event);
此时,body和window会触发,document上的事件处于冒泡阶段并没有触发
2.解决,事件定义时候加入第二个参数
var event = new Event('eventName',{ bubbles: true }); // 加入第二个参数 document.body.addEventListener('eventName',function(){ alert('body'); }); document.addEventListener('eventName',function(){ alert('document'); }); window.addEventListener('eventName',function(){ alert('window'); },true); document.body.dispatchEvent(event);
3.其它写法
var event = new Event('eventName'); event.initEvent('eventName', true);
参考链接:
https://stackoverflow.com/questions/23048322/why-firing-a-defined-event-with-dispatchevent-doesnt-obey-the-bubbling-behavior
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events