Table event bindings mouseover,td and table all go through, but tr does not trigger bubbles. I don't know why.

table binds mouseover, but bubbles do not trigger tr, directly from td to table

related codes

< table id= "t" > < tr > < td > 1 < / td > < td > 2 < / td > < td > 3 < / td > < td > 6 < / td > < / tr > < tr > < td > 4 < / td > < td > 5 < / td > < td > 11 < / td > < td > 3 < / td > < / tr > < tr > < td > 7 < / td > < td > 8 < / td > < td > 9 < / td > < td > 10 < / td > < / tr > < / table >

< 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 >

the results are as follows

Front-end javascript html5 css html

Mar.25,2021

modify the answer and use jquery to iterate through the .addEventListener event of tr
js. On this event in jquery.

getElementById ("t"). AddEventListener ("mouseover", function ()
change to
$("- sharpt tr"). On ("mouseover", function ()

)

<script type="text/javascript">
$("-sharpt").find("tr").each(function(){//tr
$("-sharpt tr").mouseover(function(){//mouseover
var index = $("-sharpt tr").index(this);
console.log(""+ index +"tr");
});
});
</script>

Previous: How to view projects built by vue-cli on your mobile phone

Next: WeChat Mini Programs navigator

I want to implement such a page, what technologies do I need to use?
A novice at the front end, who knows about html and css for about a month and a half, wants to ask the gods to take a look at it. There is such a page as the first screen, text plus pictures, the first half of the text is fixed, the second half is t...

Front-end javascript html5 css html

Mar.04,2021