Last active
July 28, 2023 16:35
-
-
Save JamoCA/2ceb233bd4219fae92a69c5bd2fc86f8 to your computer and use it in GitHub Desktop.
Mouseover event testing. Doesn't matter if using delegation or individual TR events, it misses some rows.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"><head> | |
| <meta charset="utf-8"> | |
| <!-- | |
| Date: 2023-07-28 | |
| Twitter: https://twitter.com/gamesover/status/1684964842418176000 | |
| GIST: https://gist.github.com/JamoCA/2ceb233bd4219fae92a69c5bd2fc86f8 | |
| --> | |
| <script> | |
| function highlightRow(elem, color="pink"){ | |
| if (!elem) return; | |
| elem.style.background = color; | |
| } | |
| function initMouseoverDemo(){ | |
| clearBtn.onclick = function(e){ | |
| let els = document.getElementById("table").getElementsByTagName("tr"); | |
| for(var i=0;i<els.length;i++){ | |
| highlightRow(els[i], "white"); | |
| } | |
| } | |
| // table delegation | |
| table.onmouseover = function(event) { | |
| let target = event.target.closest('tr'); | |
| highlightRow(target); | |
| }; | |
| /* individual row event listered (same issue as delegation) | |
| let trs = document.getElementById("table").getElementsByTagName("tr"); | |
| for (i = 0; i < trs.length; i++) { | |
| table.rows[i].addEventListener("mouseover", function(){ | |
| highlightRow(this); | |
| }); | |
| } | |
| */ | |
| } | |
| document.addEventListener("DOMContentLoaded", initMouseoverDemo); | |
| </script> | |
| </head> | |
| <body> | |
| <button id="clearBtn" type="button">Clear Highlights</button> | |
| <p>The javascript mouseover event is fired "when pointing device is used to move the cursor onto the element or one of its child elements", but there seems to be a duration qualifier applied. Move too fast = not triggered. Doesn't matter if using delegation or row events. Some JS from <a href="https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave#event-delegation" rel="nonofollow noopener noreferrer" target="_blank">https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave#event-delegation</a></p> | |
| <p>Mouse your mouse at varying speeds down over multiple rows to change row color to pink. (The mouseover event doesn't appear to always be triggered.)</p> | |
| <table id="table"> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th>Name</th> | |
| <th>Address</th> | |
| <th>Phone</th> | |
| <th>Date</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr data-id="24662C25-0DB1-6FB7-349F409D31BEA36F"> | |
| <td class="filter-false sorter-false">1</td><td>FirstName 1</td><td>Address 30901, Somewhere, CA 92790</td><td>(197) 196-0489</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C26-F7BD-AEC5-7142BC1CA048F0E5"> | |
| <td class="filter-false sorter-false">2</td><td>FirstName 2</td><td>Address 91893, Somewhere, CA 92229</td><td>(178) 775-6261</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C27-F9C9-93ED-72F24FC3AEDC43DB"> | |
| <td class="filter-false sorter-false">3</td><td>FirstName 3</td><td>Address 13712, Somewhere, CA 93232</td><td>(140) 576-5695</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C28-99CA-3C26-F1AF8C86A75BC8B2"> | |
| <td class="filter-false sorter-false">4</td><td>FirstName 4</td><td>Address 29527, Somewhere, CA 93324</td><td>(200) 442-2715</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C29-9565-2A25-ED6A6087EFF719CB"> | |
| <td class="filter-false sorter-false">5</td><td>FirstName 5</td><td>Address 40338, Somewhere, CA 93905</td><td>(210) 080-7032</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2A-ECCE-EE85-CF34DC90ECF75C81"> | |
| <td class="filter-false sorter-false">6</td><td>FirstName 6</td><td>Address 44119, Somewhere, CA 90564</td><td>(147) 141-6860</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2B-BC47-7356-4E623B246274FC44"> | |
| <td class="filter-false sorter-false">7</td><td>FirstName 7</td><td>Address 88679, Somewhere, CA 90629</td><td>(196) 535-6572</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2C-0226-EB8C-1D8FEEBA8EB53D26"> | |
| <td class="filter-false sorter-false">8</td><td>FirstName 8</td><td>Address 37740, Somewhere, CA 90046</td><td>(201) 617-8422</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2D-B994-BA31-45602ECA3CD77B27"> | |
| <td class="filter-false sorter-false">9</td><td>FirstName 9</td><td>Address 92688, Somewhere, CA 92520</td><td>(180) 939-7205</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2E-9A81-1F27-81256F29F9D2C43E"> | |
| <td class="filter-false sorter-false">10</td><td>FirstName 10</td><td>Address 49341, Somewhere, CA 93352</td><td>(157) 425-1728</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C2F-E06A-C570-A76C55994E74448B"> | |
| <td class="filter-false sorter-false">11</td><td>FirstName 11</td><td>Address 61255, Somewhere, CA 90325</td><td>(134) 674-1407</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C30-0600-E287-128E2F1DB8080F4D"> | |
| <td class="filter-false sorter-false">12</td><td>FirstName 12</td><td>Address 21637, Somewhere, CA 92873</td><td>(158) 969-6893</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C31-96D4-5378-D569B84F91CE8AC4"> | |
| <td class="filter-false sorter-false">13</td><td>FirstName 13</td><td>Address 83939, Somewhere, CA 91296</td><td>(128) 460-6422</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C32-FDC9-D489-4958BA116DCA7374"> | |
| <td class="filter-false sorter-false">14</td><td>FirstName 14</td><td>Address 11241, Somewhere, CA 91115</td><td>(196) 289-2040</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C33-D0FC-FA5E-8584C72095B6D1DC"> | |
| <td class="filter-false sorter-false">15</td><td>FirstName 15</td><td>Address 63937, Somewhere, CA 91729</td><td>(200) 743-1843</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C34-B740-A0BC-9C194A78CE1C420F"> | |
| <td class="filter-false sorter-false">16</td><td>FirstName 16</td><td>Address 31416, Somewhere, CA 95470</td><td>(178) 413-0257</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C35-0594-0E78-574D6F6970166882"> | |
| <td class="filter-false sorter-false">17</td><td>FirstName 17</td><td>Address 77560, Somewhere, CA 91257</td><td>(141) 027-1780</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C36-9641-F181-F11CA63AF606E4EF"> | |
| <td class="filter-false sorter-false">18</td><td>FirstName 18</td><td>Address 18677, Somewhere, CA 90521</td><td>(187) 726-6007</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C37-058B-24B0-5E1362710BCF9CDC"> | |
| <td class="filter-false sorter-false">19</td><td>FirstName 19</td><td>Address 99649, Somewhere, CA 91342</td><td>(213) 159-7727</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C38-0AB8-A5A3-718A204DEEDC0CF1"> | |
| <td class="filter-false sorter-false">20</td><td>FirstName 20</td><td>Address 70609, Somewhere, CA 92100</td><td>(139) 398-3193</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C39-EC8E-B923-3AEA815253F8AD92"> | |
| <td class="filter-false sorter-false">21</td><td>FirstName 21</td><td>Address 28361, Somewhere, CA 94130</td><td>(145) 140-4761</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3A-E474-4BC8-E54FCD4EFA133074"> | |
| <td class="filter-false sorter-false">22</td><td>FirstName 22</td><td>Address 15965, Somewhere, CA 92747</td><td>(194) 178-3022</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3B-9126-52A9-E4FA36F3314D21C4"> | |
| <td class="filter-false sorter-false">23</td><td>FirstName 23</td><td>Address 87639, Somewhere, CA 90450</td><td>(205) 321-9600</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3C-EEBF-ADEF-CE13071E9703D59F"> | |
| <td class="filter-false sorter-false">24</td><td>FirstName 24</td><td>Address 28662, Somewhere, CA 93512</td><td>(111) 271-0335</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3D-FF02-E53E-070E0CCFCD3943E3"> | |
| <td class="filter-false sorter-false">25</td><td>FirstName 25</td><td>Address 86217, Somewhere, CA 90335</td><td>(210) 303-9111</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3E-F353-8340-7C862C607D62447F"> | |
| <td class="filter-false sorter-false">26</td><td>FirstName 26</td><td>Address 12673, Somewhere, CA 94517</td><td>(191) 956-0749</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C3F-CC78-BAF7-1C3B82B19EA7212C"> | |
| <td class="filter-false sorter-false">27</td><td>FirstName 27</td><td>Address 32440, Somewhere, CA 92001</td><td>(121) 115-8475</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C40-B5EA-A36F-822D238EB0E638E6"> | |
| <td class="filter-false sorter-false">28</td><td>FirstName 28</td><td>Address 74096, Somewhere, CA 94870</td><td>(165) 554-5766</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C41-DC24-2E2F-2C169777E03800CB"> | |
| <td class="filter-false sorter-false">29</td><td>FirstName 29</td><td>Address 31447, Somewhere, CA 90135</td><td>(155) 020-3130</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C42-9605-6936-B2D62BE4145FC7B4"> | |
| <td class="filter-false sorter-false">30</td><td>FirstName 30</td><td>Address 52360, Somewhere, CA 94537</td><td>(159) 609-5898</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C43-E19A-C24B-6E1DD48BE47DCA5D"> | |
| <td class="filter-false sorter-false">31</td><td>FirstName 31</td><td>Address 36842, Somewhere, CA 91812</td><td>(148) 987-8518</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C44-CA16-E61C-FA00A9308422948D"> | |
| <td class="filter-false sorter-false">32</td><td>FirstName 32</td><td>Address 13504, Somewhere, CA 92867</td><td>(165) 164-5804</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C45-9D5F-D8C6-55FF1A249135BAD9"> | |
| <td class="filter-false sorter-false">33</td><td>FirstName 33</td><td>Address 41869, Somewhere, CA 92173</td><td>(209) 962-8834</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C46-AE42-DCC1-E1BDF7DC669C98F3"> | |
| <td class="filter-false sorter-false">34</td><td>FirstName 34</td><td>Address 81906, Somewhere, CA 90686</td><td>(176) 343-6312</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C47-BAB9-0EAE-D75076AFBB807CFC"> | |
| <td class="filter-false sorter-false">35</td><td>FirstName 35</td><td>Address 84177, Somewhere, CA 92668</td><td>(206) 969-5421</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C48-957E-7A1C-540E77D1A2DD1B4E"> | |
| <td class="filter-false sorter-false">36</td><td>FirstName 36</td><td>Address 91210, Somewhere, CA 91201</td><td>(169) 554-9922</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C49-B94F-03EF-7820BEAEC56A9A94"> | |
| <td class="filter-false sorter-false">37</td><td>FirstName 37</td><td>Address 64513, Somewhere, CA 95234</td><td>(150) 219-1493</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4A-9E7E-E8A1-7EF84907CB97EEAB"> | |
| <td class="filter-false sorter-false">38</td><td>FirstName 38</td><td>Address 62515, Somewhere, CA 90301</td><td>(167) 372-3929</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4B-9294-E4CE-C9E57CA7ADB52B39"> | |
| <td class="filter-false sorter-false">39</td><td>FirstName 39</td><td>Address 99223, Somewhere, CA 91106</td><td>(207) 143-3367</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4C-FE0D-7E9E-116756E39D71B869"> | |
| <td class="filter-false sorter-false">40</td><td>FirstName 40</td><td>Address 86236, Somewhere, CA 92970</td><td>(180) 442-2541</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4D-BB1A-0815-F5923F5DD535271E"> | |
| <td class="filter-false sorter-false">41</td><td>FirstName 41</td><td>Address 12580, Somewhere, CA 95455</td><td>(143) 466-8093</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4E-E309-9742-7D28E0EE6F76468B"> | |
| <td class="filter-false sorter-false">42</td><td>FirstName 42</td><td>Address 50077, Somewhere, CA 95161</td><td>(165) 105-8592</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C4F-A4F2-4550-A4E2F81B7C6F8725"> | |
| <td class="filter-false sorter-false">43</td><td>FirstName 43</td><td>Address 50775, Somewhere, CA 93733</td><td>(114) 941-3673</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C50-95B0-E7AC-E4F3C762A5B12E96"> | |
| <td class="filter-false sorter-false">44</td><td>FirstName 44</td><td>Address 47112, Somewhere, CA 91229</td><td>(180) 651-2373</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C51-9D59-5DED-FF2D93020D93F1EE"> | |
| <td class="filter-false sorter-false">45</td><td>FirstName 45</td><td>Address 10568, Somewhere, CA 90393</td><td>(189) 374-6656</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C52-0D46-E61A-2343B8B8DFA52806"> | |
| <td class="filter-false sorter-false">46</td><td>FirstName 46</td><td>Address 76389, Somewhere, CA 92376</td><td>(126) 533-7411</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C53-A2BC-40D7-1B33AF186AFC88CD"> | |
| <td class="filter-false sorter-false">47</td><td>FirstName 47</td><td>Address 32353, Somewhere, CA 92755</td><td>(114) 641-5643</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C54-075C-CEA4-8502E87D94850127"> | |
| <td class="filter-false sorter-false">48</td><td>FirstName 48</td><td>Address 21247, Somewhere, CA 94961</td><td>(119) 618-5882</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C55-DE86-6781-0C09BCBBDAFCBA9A"> | |
| <td class="filter-false sorter-false">49</td><td>FirstName 49</td><td>Address 37468, Somewhere, CA 91376</td><td>(180) 361-8447</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| <tr data-id="24662C56-01BC-B293-9267D43B5CD1B210"> | |
| <td class="filter-false sorter-false">50</td><td>FirstName 50</td><td>Address 33689, Somewhere, CA 90304</td><td>(194) 526-6974</td><td>7/28/2023 9:07 AM</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment