一个错误引发的询问求event.srcElemnet真相,请高手指点
初学js遇到的一个问题，关于this和event.srcElement，希望高手能给予帮助！~先谢过！
在事件响应函数tdGradeonclick()中
var index = IndexOf(tds,this);
这里的this换成event.srcElement出现异常，评分只能点击一次，第二次点击次不响应了，在tds数组中查询不到对应event.srcElemnt的td
代码如下：
<head>
<title>评分</title>
<script type="text/javascript">
function IndexOf(arr,element) {//
for (var i = 0; i < arr.length; i++) {
if (arr == element) {
return i;//数组中有这个元素，返回元素在数组中的索引号
}
}
return -1;//数组中没有此元素则返回-1
}
function iniEvent() {//动态添加事件
var tableGrade = document.getElementById("tableGrade");
var tds = tableGrade.getElementsByTagName("td"); //获取tableGrade表格中的td单元格数组
for(var i=0;i<tds.length;i++){
tds.onclick=tdGradeonclick;//动态添加td的onclick事件
tds.style.cursor="pointer";
}
}
function tdGradeonclick() {//表中单元格点击事件响应函数
var tableGrade = document.getElementById("tableGrade");
var tds = tableGrade.getElementsByTagName("td");
var index = IndexOf(tds,this);//为什么此处不能用event.srcElement？用event.srcElemnet时点击第二次不响应了，在tds数组中查询不到对应event.srcElement的td，但是第一次点击正常，不解~
for (var i = 0; i <= index; i++) {
tds.innerHTML = "<font color='Yellow'>★</font>";
}
for (var i = index + 1; i < tds.length; i++) {
tds.innerHTML = "☆";
}
}
</script>
</head>
<body>
<table id="tableGrade">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
通过调试发现，使用event.srcElement，举例：第一次点击第4个星时，event.srcElement的offsetLeft属性为78，offsetWidth属性为23，查询数组匹配成功，但是第二次点击第四颗星时则发现出行问题，此时调用event.srcElement，它的属性中offsetLeft值为1，offsetWidth为21,而获取到的5个td的属性值offsetLeft中，最左边的td的offsetLeft值为2，offsetWidth值为23和第一次点击时一样，未发生变化，两次点击的时事件发生源event.srcElement的属性却是不同，event.srcElement究竟是怎么得到的？做了什么呢？为何不一样？很不解
[解决办法]
首先你上面的代码有问题，虽然我估计是笔误。正确的代码应该是：
- JScript code
<html><head> <title>??</title> <script type="text/javascript"> function IndexOf(arr,element) {// for (var i = 0; i < arr.length; i++) { if (arr[i] == element) { return i; } } return -1; } function initEvent() { var tableGrade = document.getElementById("tableGrade"); var tds = tableGrade.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].onclick=tdGradeonclick; tds[i].style.cursor="pointer"; } } function tdGradeonclick() { var tableGrade = document.getElementById("tableGrade"); var tds = tableGrade.getElementsByTagName("td"); var index = IndexOf(tds,this); for (var i = 0; i <= index; i++) { tds[i].innerHTML = "<font color='Yellow'>★</font>"; } for (var i = index + 1; i < tds.length; i++) { tds[i].innerHTML = "☆"; } } </script> </head> <body onload="initEvent();"> <table id="tableGrade"> <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr> </table> </body> </html>