table事件绑定mouseover,td、table都经过，但是tr没有触发冒泡，不知道为什么

Question

table绑定了mouseover,但冒泡没有触发tr，从td直接到了table

相关代码

1	2	3	6
4	5	11	3
7	8	9	10

<script>

document.getElementById('t').addEventListener('mouseover', function(e){
    if (e.target.nodeName.toLowerCase() == 'td') {
        console.log('1')
    };
    if (e.target.nodeName.toLowerCase() == 'tr') {
        console.log('2');
    };
    if (e.target.nodeName.toLowerCase() == 'table') {
        console.log('3');
    }
}, false)

</script>

结果如下

Answer 1

修改答案，使用jquery遍历tr
js的.addEventListener事件在jquery是.on这个。

getElementById("t").addEventListener("mouseover", function()
改成
$("#t tr").on("mouseover",function()

<script type="text/javascript">
$("#t").find("tr").each(function(){//遍历tr
$("#t tr").mouseover(function(){//mouseover事件
var index = $("#t tr").index(this);
console.log("第"+ index +"个tr");
});
});
</script>

参考代码。效果截图

<script type="text/javascript">
document.getElementById("t").addEventListener("mouseover", function(){
        if(this.getElementsByTagName("td")){
        console.log("1")
    };
            if(this.getElementsByTagName("tr")){
        console.log("2")
    };
                if(this.getElementsByTagName("table")){
        console.log("3")
    };
//    if (e.target.nodeName.toLowerCase() == "td") {
//        console.log("1");
//    };
//    if (e.target.nodeName.toLowerCase() == "tr") {
//        console.log("2");
//    };
//    if (e.target.nodeName.toLowerCase() == "table") {
//        console.log("3");
//    }
}, false)
</script>