16.8 监听事件
在接口FileReader中提供了很多常用的事件和一套完整的事件处理机制。通过这些事件的触发，可以清晰地侦听FileReader对象读取文件的详细过程，以便更加精确地定位每次读取文件时的事件先后顺序，为编写事件代码提供有力的支持。表16-2总结了FileReader对象中的这些状态事件。
表16-2 FileReader对象中的状态事件
要想在HTML 5网页中中实现拖放操作，至少要经过如下两个步骤：
（1）将要拖放的对象元素的“draggable”属性设为“true（draggable="true"）”，这样才能对该元素进行拖放。另外默认允许拖放<img>元素与<a>元素（必须指定href）。
（2）编写与拖放有关的事件处理代码。拖放的几个事件如表16-3所示。
表16-3 与拖放有关的事件处理
在本实例的表单中，首先添加一个“file”类型的<input>元素，当用户单击“选择文件”按钮并通过打开的窗口选取一个文件后，在页面中将展示读取文件过程中所触发的事件。实例文件8.html的实现代码如下。
在上述代码中，当单击“选择文件”按钮后会触发一个自定义的函数fileUpload_Show Event（）。此函数是在文件js8.js中定义的，此函数首先检测浏览器是否支持FileReader对象，如果不支持则弹出错误提示信息。然后重新构造一个新的FileReader对象，并对传回的文件以文本编码的方式读入页面。最后列出文件在正常读取过程中将触发的4个事件。在每个事件中，首先显示ID号为<pStatus>的元素，然后将事件的状态内容设置为该元素的文本内容；当FileReader对象执行readAsText（）方法读取文件时，各个不同事件将按执行顺序被触发，设置的状态内容以动态的方式显示在ID号为<pStatus>的页面元素中。文件js8.js的代码如下。
执行效果如图16-10所示。
图16-10 执行效果