我刚刚开发了一些代码来创建一个 24x60 的表格。我想打印每个 <td> 的 ID在 mouseover :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
background-color:blue;
}
td {
width: 2px;
height: 2px;
background-color:red;
}
</style>
</head>
<body>
<table id="time-table"></table>
<script type="text/javascript">
var table = document.getElementById( "time-table" );
for ( var r = 0; r < 24; r++ ) {
var row = document.createElement( "tr" );
for ( var c = 0; c < 60; c++ ) {
var td = document.createElement( "td" );
td.id = "td-" + r + "-" + c;
td.onmouseover = function ( e ) {
console.log( this.id );
}
row.appendChild( td );
}
table.appendChild( row );
}
</script>
</body>
</html>
代码有效，但现在我担心它是否经过优化？我是否在嵌套循环中创建了 1440 个事件处理函数？或者 JavaScript 解释器是否足够聪明，只创建一个函数并将其分配给 1440 <td>元素？
最佳答案
不，JavaScript 不会进行任何优化(好吧，也许某些实现会进行优化，但您不应该依赖它)。您确实在创建那么多功能。
最好一次定义函数并重用它:
var handler = function() {
console.log(this.id);
}
for ( var r = 0; r < 24; r++ ) {
var row = document.createElement( "tr" );
for ( var c = 0; c < 60; c++ ) {
var td = document.createElement( "td" );
td.id = "td-" + r + "-" + c;
td.onmouseover = handler;
row.appendChild( td );
}
table.appendChild( row );
}
或者考虑使用事件委托(delegate)，即将处理程序绑定(bind)到单元格的祖先:
table.onmouseover = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName === 'TD') {
console.log(target.id);
}
};
这是有效的，因为事件在 DOM 树中向上冒泡，并且在某些浏览器中甚至可能在性能方面更好。
了解事件处理的一个很好的资源是 the articles at quirksmode.org .
关于javascript - 在嵌套循环中创建事件处理程序的效率 : am I creating 1440 functions here?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10709439/