Javascript 将侦听器附加到身体不起作用？_Javascript_Events_Javascript Events_Mouseevent

Javascript 将侦听器附加到身体不起作用？

javascript events

Javascript 将侦听器附加到身体不起作用？,javascript,events,javascript-events,mouseevent,Javascript,Events,Javascript Events,Mouseevent,我不明白为什么这段代码不起作用： <!DOCTYPE html> <html><head></head><body onload=" document.body.addEventListener('mousedown',function(e){ alert(123); },false); "></body></html> 顺便说一句，我正在使用chrome，请尝试改用全局窗口对象： <!DOCTYPE h

我不明白为什么这段代码不起作用：

<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>

顺便说一句，我正在使用chrome，请尝试改用全局窗口对象：

<!DOCTYPE html>
<html><head></head><body onload="
window.addEventListener('click',function(e){
alert(123);
},false);
"></body></html>

对于给定的HTML，主体没有高度和宽度，因此当您单击窗口时，它不会接收任何鼠标事件。但它仍然可以接收关键事件。如果你给它一个高度和宽度，它就会工作

<!DOCTYPE html>
<html><head></head><body style="height:1000px; width:1000px" onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>

请注意，我添加了一些内容，并在主体中添加了边框，以便您可以看到其尺寸，你看到的一切都是一条黑线。若并没有像任何其他块元素一样的内容，则表示不能在其内部单击，则主体不会占用任何空间

您似乎认为主体会分布在整个浏览器窗口中，但事实并非如此

如果您将处理程序附加到窗口，它将获取可见区域内发生的所有事件。

另一种方法是使用jQuery绑定。它不仅使您的代码更少，而且大多数浏览器都支持它。试试这个：

$('body').bind('click mousedown', function() {
  alert(123);
});

附加到body元素的侦听器中的值在不同浏览器中的行为略有不同。在Firefox和旧版本的IE中尝试以下内容注意，这是专门针对这种情况的，并不意味着它是一个通用的工具这是什么？功能：

<head>
<title>Some "this" tests</title>

<script type="text/javascript">

var whatIs = (function(global) {
  return function(that) {

    // If String(that) isn't useful, try some stuff
    if (String(that) == '[object]') {
      if (that == global || that == window) {
        alert('window');
      } else if (typeof that.tagName == 'string') {
        alert(that.tagName);
      } else {
        alert(that);
      }

    // Otherwise show that
    } else {
      alert(that);
    }
  }
})(this);

</script>
</head>
<body onclick="whatIs(this);"  onload="whatIs(this);">
  <div onmousedown="whatIs(this)">this</div>
</body>

在所有浏览器中，onload显示窗口，单击div显示为div。单击body在Firefox中显示为窗口，但在IE、Opera和Chrome中显示body元素

嗯，为什么要在一个onload内联事件处理程序中附加一个事件…@bazmegakapa。该文件另存为test.htmlbtw为什么该文档的理论是这样的。如果鼠标向下移动，则body不起作用，但如果鼠标向下键，则body起作用？如果您说body不会分布在整个浏览器窗口中。。你怎么解释为什么整个屏幕都是红色的？@Pacerier:问得好。。。答案可能就在这里：。正文有一个decprecated bgcolor属性，用于设置文档的背景色。我假设CSS背景色的应用方式与向后兼容性相同？另请参见@Pacerier：如果仍然使用Chrome，请单击窗口中的某个位置，从上下文菜单中选择Inspect元素，然后在DOM树中选择body元素。您将在页面中看到突出显示，但它并没有覆盖整个视图。我认为您已经看到了这一点：浏览器不支持DOM元素的绑定方法，jQuery有一个用于其jQuery对象的绑定方法-很好的发现。那么firefox是错的，还是firefox是对的，其他的都错了？

<head>
<title>Some "this" tests</title>

<script type="text/javascript">

var whatIs = (function(global) {
  return function(that) {

    // If String(that) isn't useful, try some stuff
    if (String(that) == '[object]') {
      if (that == global || that == window) {
        alert('window');
      } else if (typeof that.tagName == 'string') {
        alert(that.tagName);
      } else {
        alert(that);
      }

    // Otherwise show that
    } else {
      alert(that);
    }
  }
})(this);

</script>
</head>
<body onclick="whatIs(this);"  onload="whatIs(this);">
  <div onmousedown="whatIs(this)">this</div>
</body>