37-问题

5.9.1　问题

你打算记录发生 mousemove 事件时 event 对象的各种属性，因为使用 $('.classname') 选择器寻找事件数据，并用它更新表格单元格，所以代码的执行滞后了。

页面包含如下用于记录的HTML代码：

<table id="log">
　　 <tr><td>Client X:</td><td class="clientX"></td></tr>
　　 <tr><td>Client Y:</td><td class="clientY"></td></tr>
　　 <tr><td>Page X:</td><td class="pageX"></td></tr>
　　 <tr><td>Page Y:</td><td class="pageY"></td></tr>
　　 <tr><td>Screen X:</td><td class="screenX"></td></tr>
　　 <tr><td>Screen Y:</td><td class="screenY"></td></tr>
</table>

还有如下的JavaScript代码：

$('html').mousemove( function( event ) {
　　 $('.clientX').html( event.clientX );
　　 $('.clientY').html( event.clientY );
　　 $('.pageX').html( event.pageX );
　　 $('.pageY').html( event.pageY );
　　 $('.screenX').html( event.screenX );
　　 $('.screenY').html( event.screenY );
});

该页面还包含大量（数千个！）其他DOM元素。在简单的测试页面中，上述代码运行得很好，但是它在这个复杂的页面中运行得太慢了。