冒泡事件设计

时间:2011-02-03 19:43:08

标签: javascript html

我在一个包含onmouseover和onmouseout事件的表中有一堆<td>。我希望只有一个事件处理程序,比如<table>本身知道如何处理所有事件以防止页面上有这么多事件处理程序。使用原生javascript,最好的方法是什么?

3 个答案:

答案 0 :(得分:0)

你应该使用不显眼的javascript,这样你就可以为每个设置两个处理程序,但它不会使页面混乱。使用getElementsByTagName(“td”)来获取 - 根据需要修改它。然后遍历并为每个元素,tableElem,tableElem.onMouseOver = function(){whatever ...}和tableElem.onMouseOut = function(){whatever ...}。

如果你想使用jQuery,你可以使它更简洁,例如$( “TD”)的mouseOver(函数(){无论;});

答案 1 :(得分:0)

示例代码:

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

    // do stuff
};

答案 2 :(得分:0)

事件应该冒泡到表中,除非它们在过程中从层次结构中较低的元素中取消。您可以在表上为mouseovermouseout事件设置事件侦听器,并检查目标是否为<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