为什么document.ready中的事件处理函数起作用，但取出后却不起作用？

Question

I am new to Javascript and I am wondering on the behavior below.

Consider the working code below:

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

But this one does not work :

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

Why is the second one not working when all I did was use inline eventhandler and function?

Thanks in advance!

Answer 1

First, I wouldn't do this. Switching from using modern event handling to onXyz attributes is a bit backward. See below the fold for more.

But answering the question of why it didn't work: this within the call to fade in your second example is not the div (it's the global object, aka window on browsers). You'd have to change your onmouseover to:

onmouseover="fade.call(this)"

...for this to be the div during the call.

(Separately, note that you used onmouseover in the second code block but mouseenter in your first code block. I've left it as onmouseover , but you probably wanted onmouseneter instead.)

Example:

 $(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> 

Or alternately, just pass this in as an argument and change fade to use it:

 $(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> 

---

But again, I wouldn't use an onXyz attribute; if you don't want the handlers in a ready callback, they don't need to be, but that doesn't mean you have to switch to using attributes for event hookup. Instead:

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

Example:

 $('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> 

Answer 2

You use document.ready because you don't know if the nodes you're trying to effect have been rendered yet.

Scripts are executed in-order on the page. So if you have more div s below your script definition they're not going to match in $("div") .

Since scripts are typically included in the header, you totally need document.ready if you want JavaScript to see all the nodes initially.

In your example you don't need document.ready per se. The error is elsewhere.

---

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