javascript何时触发内联事件？答案

【问题标题】：When are inline event triggered in javascript?javascript何时触发内联事件？
【发布时间】：2010-01-25 03:45:39
【问题描述】：

<input onclick=".." />

我是说bubbling phase还是capture phase？

【问题讨论】：

标签： javascript html javascript-events

【解决方案1】：

冒泡阶段。你可以通过这个链接 http://www.quirksmode.org/js/events_order.html

【讨论】：

【解决方案2】：

在支持 W3C DOM 的浏览器中，以这种方式注册的事件发生在冒泡阶段。也就是说，内部元素的事件在外部元素的事件之前触发。（大多数现代浏览器都应该如此……在旧的 Netscape 浏览器中，情况正好相反。）

您可以很容易地在给定的浏览器中对此进行测试。例如，尝试加载这个测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en"> 
<head>
  <title>Event order test page</title>
</head>
  <body>
    <div onclick="alert('outer')">
      <div onclick="alert('inner')">
        *************
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

Javascript 的好处是您可以轻松地试用它：

<html>
  <head>
    <title>Fooscript</title>
    <script type="text/javascript" language="javascript">
      function log(text)
      {
        document.getElementById('logger').innerHTML += text + "<br />";
      }
    </script>
  </head>
  <body onmousedown="log('body_down');" onmouseup="log('body_up');" onmouseclick="log('body_click');">
    <form action="test.php" method="get">
      <input type="button" name="foo" value="foo" onmousedown="log('foo_down'); return false;"  onmouseclick="log('foo_click'); return false;"  onmouseup="log('foo_up'); return false;"/>
    </form>
    <div id="logger">
    </div>
  </body>
</html>

这会导致 foo 在 body 事件之前被触发。

【讨论】：