Javascript 自定义事件

Posted by jiananshi on 2017-01-12

有天在做一个联动的组件的时候遇到一个场景,iframe 中的某些变化需要同步更新外层 html 中的某些元素,怎样可以通知到呢?

我们可以在外层的页面中通过 contentDocument 拿到 iframe 里的 window 对象,然后由于变化不一定是原生内置事件,比如鼠标键盘等交互,这里我们可以通过 CustomEvent 来创造一个自定义事件冒到 window 上:

1
var myEvent = new CustomEvent('myEvent');

之后通过在 dom 元素上调用 dispatchEvent 来触发它:

1
2
3
var $btn = document.querySelector('#myBtn');
$btn.addEventListener('myEvent', handler);
$btn.dispatchEvent(myEvent);

如果需要 event 传递一些数据可以在 event 创建的时候传入一个 detail:

1
2
3
4
5
6
var myEvent = new CustomEvent('myEvent', {
detail: 'data'
});
// 需要注意的是:
// 自定义事件对象一旦创建
// 就不能再传入数据了

那么 CustomEvent 的兼容性如何呢?这里用 caniuse 查一下:

caniuse

可以看到 IE 需要 11 以外其他主流浏览器都支持良好

相关资源

CustomEvent - Web APIs | MDN