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

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

javascript

Javascript 在嵌套循环中创建事件处理程序的效率：我在这里创建1440个函数吗？,javascript,Javascript,我刚刚开发了一个小代码来创建一个24x60表。我想在鼠标上方打印每个的id: <!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=

我刚刚开发了一个小代码来创建一个24x60表。我想在

鼠标上方打印每个
的id:
<!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>


无标题文件
桌子{
背景颜色：蓝色；
}
运输署{
宽度：2倍；
高度：2倍；
背景色：红色；
}
var table=document.getElementById（“时间表”）；
对于（var r=0；r<24；r++）{
var行=document.createElement（“tr”）；
对于（var C＝0；C＜60；C++）{
var td=document.createElement（“td”）；
td.id=“td-”+r+“-”+c；
td.onmouseover=函数（e）{
console.log（this.id）；
}
世界其他地区（td）；
}
表2.追加子项（行）；
}

代码是有效的，但现在我担心它是否得到了优化？我是否在嵌套循环中创建1440个事件处理函数？或者JavaScript解释器是否足够聪明，可以只创建一个函数并将其分配给1440个
元素？
不，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 );
}

这是可行的，因为事件会在DOM树上冒泡，在某些浏览器中可能会有更好的性能
学习事件处理的一个很好的资源是。
为了安全起见，一个小的改变：
var myFunc = function (e) {
    console.log( this.id );
};

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 = myFunc;
        row.appendChild( td );
    }
    table.appendChild( row );
}

var myFunc=函数（e）{
console.log（this.id）；
};
var table=document.getElementById（“时间表”）；
对于（var r=0；r<24；r++）{
var行=document.createElement（“tr”）；
对于（var C＝0；C＜60；C++）{
var td=document.createElement（“td”）；
td.id=“td-”+r+“-”+c；
td.onmouseover=myFunc；
世界其他地区（td）；
}
表2.追加子项（行）；
}
我建议将一个事件处理程序放在表上，并使用事件冒泡在一个位置处理它：
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;
        row.appendChild( td );
    }
    table.appendChild( row );
}
table.addEventListener('mouseover', function(e) {
    console.log(e.target.id);
}, false);

var table=document.getElementById（“时间表”）；
对于（var r=0；r<24；r++）{
var行=document.createElement（“tr”）；
对于（var C＝0；C＜60；C++）{
var td=document.createElement（“td”）；
td.id=“td-”+r+“-”+c；
世界其他地区（td）；
}
表2.追加子项（行）；
}
表.addEventListener（'mouseover'，函数（e）{
console.log（e.target.id）；
}，假）；

对于旧版本的IE，您可以使用attachEvent而不是addEventListener。
是的，您可以为其中的每个元素定义一个未命名的函数，但是您可以简单地在循环之外定义函数并引用它
var printMyId = function(e) {
  console.log(e.srcElement.id);
};
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 = printMyId;
    row.appendChild(td);
  }
  table.appendChild(row);
}

var printMyId=函数（e）{
console.log（e.srcielement.id）；
};
var table=document.getElementById（“时间表”）；
对于（var r=0；r<24；r++）{
var行=document.createElement（“tr”）；
对于（var c=0；c<60；c++）{
var td=document.createElement（“td”）；
td.id=“td-”+r+“-”+c；
td.onmouseover=printMyId；
世界其他地区（td）；
}
表2.追加子项（行）；
}
要100%确保只生成一个函数，可以在循环外声明它。哪个解释器？什么版本？每当你问JavaScript是否足够聪明时，答案通常是否定的。我不知道这是否会导致每个函数都有一个新的函数，但是如果你定义一个函数，然后只分配它，而不是使用匿名函数，你应该有对同一个函数的引用。我认为JavaScript会按照你的要求执行；不是你想让它做的。这是个好问题。。。考虑将标题改为谷歌所做的事情。只是一个关于委派的说明：它只适用于那些实际上冒泡DOM树的事件。提交、聚焦、模糊、加载、卸载、更改、重置和滚动等事件不会出现气泡，因此委派将不起作用。
var printMyId = function(e) {
  console.log(e.srcElement.id);
};
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 = printMyId;
    row.appendChild(td);
  }
  table.appendChild(row);
}