Question

我是Javascript的新手，我想知道下面的行为。

考虑下面的工作代码：

 <div><br/><strong>Click Me!</strong></div>   
 <script>

    $(document).ready(function(){
        $('div').mouseenter(function(){
           $(this).fadeTo('fast',1);
        });

        $('div').mouseleave(function(){
           $(this).fadeTo('fast',0.5); 
        });

    });

 </script>

但是这个不起作用：

 <div onmouseover="fade()"><br/><strong>Click Me!</strong></div>   
 <script>

    $(document).ready(function(){

        $('div').mouseleave(function(){
           $(this).fadeTo('fast',0.5); 
        });

    });

    function fade(){
        $(this).fadeTo('fast',1);
    }
 </script>

当我所做的只是使用内联事件处理程序和函数时，为什么第二个不工作？

提前致谢！

Answer 1

首先，我不会这样做。从使用现代事件处理切换到onXyz属性有点落后。请参阅下面的更多内容。

但回答了为什么它不起作用的问题：在你的第二个例子中调用this中的fade不是div（它是全局对象，又名浏览器上的window。您必须将onmouseover更改为：

onmouseover="fade.call(this)"

... this在通话期间成为div。

（另请注意，您在第二个代码块中使用了onmouseover但在第一个代码块中使用了mouseenter。我已将其保留为onmouseover，但您可能想要onmouseneter代替。）

示例：

＆＃13;

$(document).ready(function(){

  $('div').mouseleave(function(){
    $(this).fadeTo('fast',0.5); 
  });

});

function fade(){
  $(this).fadeTo('fast',1);
}

＆＃13;

<div onmouseover="fade.call(this)"><br/><strong>Click Me!</strong></div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

或者，只需将this作为参数传递，然后更改fade即可使用它：

＆＃13;

$(document).ready(function(){

  $('div').mouseleave(function(){
    $(this).fadeTo('fast',0.5); 
  });

});

function fade(element){
  $(element).fadeTo('fast',1);
}

＆＃13;

<div onmouseover="fade(this)"><br/><strong>Click Me!</strong></div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

但同样，我不会使用onXyz属性;如果您不希望处理程序处于ready回调中，则他们不需要，但这并不意味着您必须切换到使用属性进行事件连接。代替：

$('div').mouseleave(function(){
  $(this).fadeTo('fast',0.5); 
});
$('div').mouseenter(function(){
  $(this).fadeTo('fast',1); 
});

示例：

＆＃13;

$('div').mouseleave(function(){
  $(this).fadeTo('fast',0.5); 
});
$('div').mouseenter(function(){
  $(this).fadeTo('fast',1); 
});

＆＃13;

<div><br/><strong>Click Me!</strong></div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

您使用document.ready因为您不知道您尝试生效的节点是否已经渲染。

脚本在页面上按顺序执行。因此，如果您的脚本定义下方有div个，那么$("div")就无法匹配。

由于脚本通常包含在标题中，如果您希望JavaScript最初查看所有节点，则完全需要document.ready。

在您的示例中，您本身并不需要document.ready。错误发生在其他地方。

<div>1</div>
<script>
  console.log($("div").length); // 1
  $(document).ready(function () {
    console.log($("div").length); // 2
  });
</script>
<div>2</div>

为什么document.ready中的事件处理函数有效但在取出时不起作用？

2 个答案: