Why can't TR be captured when event broker (delegate) is performed on Table?

binds a mouseover event on table to get data from any row you plan to move to. However, it is found that no matter whether the event is set in the capture phase or the bubbling stage, you can only get the td but not the tr. What"s going on, boss, ask for help

TABLE.addEventListener("mouseover", (e)=>{
  console.log(e.target.tagName);
  
  if(e.target.tagName === "TR") {
    console.log(e.target);
    //
  }
},false)
Apr.07,2021
The

tr tag is completely obscured by td, so mouseover does not fall on tr at all, it is triggered directly on td. In the
experiment, you will find that table, is triggered first because table has a border or cell gap by default. When the mouse enters table from the outside, it first passes through the border or cell space of table. You can verify that table's border and cellspacing are set to 0, and table will not be mouseover.


event bubbling is not triggered once by all nodes, but is passed up step by step from the lowest node. So you can't catch the event triggered by < tr > because it's not the lowest level, and there's < td > underneath it.

I don't know what you're doing. I can't imagine why you only capture < tr > .


what I mean is that on table, addEventListener e.target is table e.currentTarget and td, is that you can't get tr at all. Unless you addEventListener, on tr, e.target is tr.

Menu