Question

我有一个充满细胞的桌子，我想知道鼠标在哪个细胞上。

为此，我已将事件附加到所有单元格，然后我找到了元素。但我想可能会有更好的选择。对吗？

是否有可能我只在顶部附加单个事件处理程序，仍然能够捕获所有信息。比如当前在哪个单元格用户上等。

如下所示，

<table onMouseOver="monitorFuntion(event)" >...</table>

Answer 1

可以完全你所说的：你可以在桌子上放一个处理程序，然后从那里找到单元格。（有时称为“event delegation”。）您可以针对某些事件执行此操作，包括mouseover和mouseout，因为他们bubble。您不能对其他活动（例如blur或focus）执行此操作，因为它们不会冒泡。

假设您有一个ID为“myTable”的表。您可以为mouseover：

连接一个事件处理程序

var table = document.getElementById("myTable");
if (table.attachEvent) {
    table.attachEvent("onmouseover", handleMouseOver);
}
else {
    table.addEventListener("mouseover", handleMouseOver);
}

然后像这样处理：

function handleMouseOver(event) {
    var target;

    // Handle IE event difference from standard
    event = event || window.event;

    // Find out what element the event actually happened on
    // (Another IE difference here, srcElement vs target)
    target = event.srcElement || event.target;

    // Since that might be an element *within* your cell (like
    // a link, or a `span`, or a `strong`, etc.), find the cell
    while (target && target.tagName != "TD" && target.tagName != 'BODY') {
        target = target.parentNode;
    }
    if (target && target.tagName != 'BODY') {
        // Found one, `target` now points to the cell the mouse is over
    }
}

请注意，处理target最终为null或引用body元素的情况非常重要，因为您将在表的边框上获取此事件，行填充等等。

Javascript库可以帮助您实现 lot 。例如，上面使用Prototype看起来像这样：

$("myTable").observe("mouseover", handleMouseOver);

function handleMouseOver(event) {
    var target;

    target = event.findElement("td");
    if (target) {
        // ...
    }
}

jQuery，Closure和其他人同样会有所帮助。

Answer 2

是的，您可以这样做，然后使用事件对象来查找元素。 IE和其他浏览器之间的事件对象不同，但获得“目标”大致相同：

 function handler(ev) {
   ev = ev || window.event;
   var targetElement = ('target' in ev) ? ev.target : ev.srcElement;
   // ...
 }

现在不是所有事件都会“冒泡”给你，但我想鼠标事件。问题主要是“改变”。像jQuery或Prototype这样的框架通常会尝试为您提供更多规范化的行为。

为IE兼容性而修复

编辑

Answer 3

根据您发布的代码段，您正在寻找事件委派。

第1步：使用jQuery 1.4.2 +

第2步：

// you can use move, enter, out, over whatever...
$("table").delegate("mouseenter", "td", click, function(){
    var tableCell = $(this); // the cell which is currently moused-over.
});

帮助我理解JavaScript事件

3 个答案: