JS调用浏览器打印功能

最近做了一个调用浏览器打印的功能，之前没做过，百度了一下，觉得非常简单，现在贴出代码以及需要注意的地方。

$(document).on('click', '.printBtn', function(){
		//创建一个打印窗口 
		var printWindow = window.open("打印窗口","_blank");
		//将明细页面拷贝到新的窗口，这样新的窗口就有了明细页面的样式
		var htmlbox = $("html").html();
		printWindow.document.write(htmlbox);
		//获得要打印的内容
		var printbox = $("#printDiv").html();
		//将要打印的内容替换到新窗口的body中
		printWindow.document.body.innerHTML = printbox;
		//脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。
		//并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。
		printWindow.document.close();
		//打印
		//chrome浏览器使用jqprint插件打印时偶尔空白页问题
		//解决方案：有时候页面总是加载不出来，打印出现空白页，可以设置延迟时间来等待页面的渲染，但是渲染时间的长短跟页面的大小有关，是不固定的。所以这里使用事件监听器。
		printWindow.addEventListener('load', function(){
			printWindow.print();
			//关闭窗口
			printWindow.close();
		});
	});

注意之处：
1、获取新页面的内容要用jquery的html()方法，不能用js的innerHTML方法，因为js的innerHTML方法获取的页面内容会失去样式。
2、直接用print()方法时，谷歌浏览器在打印预览的时候会出现空白页。原因是页面渲染还没有完成，就调用了print()方法。刚开始的时候使用setTimeout()方法延迟加载，但是发现不行，因为延迟的时间长短取决于页面的大小。所以这里使用了事件监听器。

事件函数：
element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行

那么什么是事件冒泡和事件捕获呢？

事件传递有两种方式：冒泡和捕获

事件传递定义了元素事件触发的顺序。如果将a元素插入到div元素中，用户点击a元素，哪个元素的“click”事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：a元素的点击事件先触发，然后会触发div元素的点击事件。

在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：div元素的点击事件先触发，然后再触发a元素的点击事件。

移除监听事件
element.removeEventListener(“mousemove”, myFunction);