时间戳

首页 > 解决方案 > javascript事件冒泡可以在html控件上完成吗

javascript - javascript事件冒泡可以在html控件上完成吗

问题描述

我可以有一个单独的js文件来对 html 控件事件执行操作，例如

每当我将鼠标放在应显示警报的任何表格上时，我都会在网页上显示三个表格。

我想要一个单独的 js 文件中的代码，我不能使用 id 或 class 作为选择器，选择器应该是 html 控件，如 table.onmouseOver

我试过使用

table.onmouseover = handler;
function handler(event){
  alert("mouseOver done");
  return false;
}

但它不工作

<body>
    <table border="1">
        <tr id="red">
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
        </tr>
    </table>
    </br>
    </br>
    <table border="1">
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
    </table>
   </body>

如上所述，每当鼠标经过没有 id 或类选择器的任何一个表时，我都想触发事件

标签： javascript

解决方案

试试下面的代码片段

function handler(event){
  alert("mouseOver done");
  return false;
}

document.addEventListener("DOMContentLoaded", function() { 
var oTables = document.getElementsByTagName("table");

for(var i=0;i<oTables.length;i++)
{
  oTables[i].addEventListener("mouseover",handler);
}


});
<html>
<body>
    <table border="1">
        <tr id="red">
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
        </tr>
    </table>
    <br/>
    <table border="1">
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
    </table>
   </body>
   </html>

推荐阅读