冒泡事件设计

Question

我在具有的onmouseover和onmouseout事件的表一堆<td>的。我想只有一个事件处理程序，例如<table>本身，它知道如何处理所有事件以防止页面上有这么多事件处理程序。使用原生javascript，最好的方法是什么？

Answer 1

应将事件冒泡到，除非它们在该处理从在层次结构中的元素较低向下取消该表。您可以为表上的mouseover和mouseout事件设置事件侦听器，并检查目标是否为<td>单元。如果是这样，那么处理这些事件。这是一个简单的例子。

var table = document.getElementById("myTable"); 

table.addEventListener('mouseover', function(event) { 
    var target = event.target; 
    if (target.nodeName == 'TD') { 
     target.style.backgroundColor = '#FFF'; 
    } 
}); 

查看compatibility table了解鼠标事件。由于旧版本的IE不遵循w3c规范中的DOM事件注册模型，因此您必须使用attachEvent才能为IE附加事件。

阅读了这个article得到更好的理解在IE和其他浏览器的差异。

结帐非跨浏览器example这里。

Answer 2

你应该使用非侵入式JavaScript，使你有两个处理程序设置为每个但并不凌乱的页面。使用getElementsByTagName（“td”）获取 - 根据需要修改。然后遍历并为每个元素，tableElem，tableElem.onMouseOver = function（）{whatever ...}和tableElem.onMouseOut = function（）{whatever ...}。

如果你想使用jQuery，你可以使它变得更加简洁。 $（ “TD”）鼠标悬停（函数（）{无论;}）;

Answer 3

示例代码：

table.onmouseover = function(event) { 
    var target = (event && event.target) || window.event.srcElement; 
    if(target.nodeName.toLowerCase() !== 'td') return; 

    // do stuff 
};