为什么document.ready中的事件处理程序函数有效但无效;取出后不起作用

Why eventhandler function in document.ready works but doesn't work when taken out?

本文关键字：无效 不起作用 有效 函数 ready document 程序 事件处理 为什么      更新时间：2023-09-26

我是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>

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

提前感谢！

首先，我不会这么做。从使用现代事件处理切换到onXyz属性有点落后。请参阅下面的折叠以了解更多信息。

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

onmouseover="fade.call(this)"

使this在调用期间成为div。

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

示例：

$(document).ready(function(){
  $('div').mouseleave(function(){
    $(this).fadeTo('fast',0.5); 
  });
});
function fade(){
  $(this).fadeTo('fast',1);
}
<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>

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

$(document).ready(function(){
  $('div').mouseleave(function(){
    $(this).fadeTo('fast',0.5); 
  });
});
function fade(element){
  $(element).fadeTo('fast',1);
}
<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>

但是，我不会使用onXyz属性；如果不希望在ready回调中使用处理程序，则不需要它们，但这并不意味着必须切换到使用属性进行事件连接。相反：

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

示例：

$('div').mouseleave(function(){
  $(this).fadeTo('fast',0.5); 
});
$('div').mouseenter(function(){
  $(this).fadeTo('fast',1); 
});
<div><br/><strong>Click Me!</strong></div>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用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>
相关文章：