在嵌套循环中创建事件处理程序的效率:我在这里创建了1440个函数吗？

Question

在嵌套循环中创建事件处理程序的效率:我在这里创建了1440个函数吗？

我刚开发了一些代码来创建一个24x60的表.我想打印每个ID <td>上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>

Run Code Online (Sandbox Code Playgroud)

代码有效,但现在我担心它是否经过优化？我是否在嵌套循环中创建了1440个事件处理函数？或者JavaScript解释器是否足够聪明,只能创建一个函数并将其分配给1440个<td>元素？

Answer 1

Fel*_*ing 12

不,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 );
}

Run Code Online (Sandbox Code Playgroud)

或者考虑使用事件委托,即将处理程序绑定到单元格的祖先:

table.onmouseover = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    if(target.nodeName === 'TD') {
        console.log(target.id);
    }
};

Run Code Online (Sandbox Code Playgroud)

这是有效的,因为事件会冒出DOM树,在某些浏览器中甚至可能性能更好.

有关事件处理的一个很好的资源是quirksmode.org上的文章.

归档时间：	13 年，7 月前
查看次数：	369 次
最近记录：	13 年，7 月前