事件委托关于无法直接操作table的tr

委托案例（ table tr(5*5)
移入移出背景变色（pink）+ 的第三列移入移出背景变色（green）

document.getElementsByTagName("table")[0].onmouseover = function(e) {

　　// console.log(e.target.nodeName);

            

　　if (e.target.nodeName == "TR") {

　　　　e.target.nodeName.style.background = "pink";

　　}

　　

　　if (e.target.nodeName == "TD" && e.toElement.cellIndex == 2) {

　　　　 e.target.style.background = "green";

　　}

}

document.getElementsByTagName("table")[0].onmouseout = function(e) {

　　if (e.target.parentNode.nodeName == "TR") {

　　　　e.target.parentNode.style.background = "";

　　}

　　

　　if (e.target.nodeName == "TD" && e.toElement.cellIndex == 2) {

　　　　e.target.style.background = "green";

　　}

}

 

事件冒泡并不是所有节点都触发一次，而是从最下层的节点，逐级向上传递。所以这样是无法捕捉到 <tr> 触发的事件的，因为它不是最下层，它下面还有 <td>，

tr标签被td完全遮盖住，所以mouseover根本不会降临到tr上，都是在td上直接触发。但是我们可以通过event来找到事件源的父级，由此来控制tr背景。

学会利用event对象的属性来操作完成需求

 

document.getElementsByTagName("table")[0].onmouseover = function(e) {

　　// console.log(e.target.parentNode.nodeName);

            

　　if (e.target.parentNode.nodeName == "TR") {

　　　　e.target.parentNode.style.background = "pink";

　　}

　　

　　if (e.target.nodeName == "TD" && e.toElement.cellIndex == 2) {

　　　　 e.target.style.background = "green";

　　}

}

document.getElementsByTagName("table")[0].onmouseout = function(e) {

　　if (e.target.parentNode.nodeName == "TR") {

　　　　e.target.parentNode.style.background = "";

　　}

　　

　　if (e.target.nodeName == "TD" && e.toElement.cellIndex == 2) {

　　　　e.target.style.background = "green";

　　}

}