随着移动端的发展，我们的网页开发也越来越多样化，响应式也成了前端开发的一个焦点。特别是现在的后台管理系统，都喜欢做个全屏按钮，以及左侧导航的展开收起功能。在这样的情况下，如果我们的页面只是一些简单的标签布局还好，一旦使用了某些插件，比如，echarts，我们就得考虑菜单切换等功能产生的重置问题。
举个例子：假如我们的页面布局分为左边菜单栏和右侧内容区，内容区有很多的echarts图表，左侧的菜单可以展开收起，相应的，内容区会跟着变宽变窄。这个时候，虽然我们的图表做了窗口改变时的自动resize，但图表并不会改变，因为展开收起菜单时，只是页面容器的宽度发生了变化，并没有触发窗口大小的改变，自然也触发不了resize事件。那我们该如何做呢？
一般的方法，可能就是在菜单展开收起的时候，手动触发一次图表的resize事件，这种做法，在图表只有一两个的时候，固然可取。但如果有很多个图表，甚至拿我之前做的可视化项目来说，所有页面都是图表，再用这种方式未免显得太过苍白无力，且代码臃肿。这个时候，我们就该换一种思路来解决了。
既然我们已经为图表添加了窗口改变的监听，那在我们改变菜单的展开收起时，手动触发一次窗口的resize事件不就可以了吗。如何触发呢，且看下面的代码
|
1 2 3 4 5 6 7 8 9 |
diyWindowResize(){ if(document.createEvent) { var event = document.createEvent("HTMLEvents"); event.initEvent("resize", true, true); window.dispatchEvent(event); } else if(document.createEventObject) { window.fireEvent("onresize"); } } |
你只需调用一下该方法即可，已做了兼容处理，IE 可用，亲测有效，也是本人项目中在使用的。
event.initEvent 参数说明：
|
1 2 3 4 5 6 7 |
event.initEvent(type, bubbles, cancelable); type 一个 DOMString 类型的字段，定义了事件的类型. bubbles 一个 Boolean 值，决定是否事件是否应该向上冒泡. 一旦设置了这个值，只读属性Event.bubbles也会获取相应的值. cancelable 一个 Boolean 值，决定该事件的默认动作是否可以被取消. 一旦设置了这个值, 只读属性 Event.cancelable 也会获取相应的值. |
demo演示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 创建事件. var event = document.createEvent('Event'); // 初始化一个点击事件，可以冒泡，无法被取消 event.initEvent('click', true, false); // 设置事件监听. elem.addEventListener('click', function (e) { // e.target 就是监听事件目标元素 }, false); // 触发事件监听 elem.dispatchEvent(event); |
值得一提的是，上面讲的 document.createEvent 属于老方法，新的 api 为new Event()，使用方法如下：
|
1 2 |
var event = new Event('resize') window.dispatchEvent(event) |
参考链接：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
但是该方法不支持 IE 浏览器，支持 edge 浏览器，出于微软都已经放弃了IE的角度考虑，建议使用该方法。如果你的公司有老顽固的存在，就还是乖乖的用上面的方法吧。
发表评论