Overriding the mouseout handler for an image when a button is clicked

Question

I had posted this question in Stack Overflow and they told me it would be better served on Code Review.

Is there a more effecient way of changing the mouseout state when a button is clicked? When a button is clicked I want the image in the click event to take precedence over the image in the mouseout event. The following code works but I'm not sure if nesting events is a good practice.

$("#targetBtn").on({
 "mouseover" : function() {
 $(this).find('img').attr('src', 'images/_hover.png');
 },
 "mouseout" : function() {
 $(this).find('img').attr('src', 'images/_mouseout.png');
 },
 "click" : function() {
 $(this).find('img').attr('src', 'images/_selected.png');
 $(this).mouseout(function() {
 $(this).find('img').attr('src', 'images/_selected.png');
 });
 }
});

If anyone could refactor this code and show me a better way of doing this it would be greatly appreciated. Also if someone could explain why nesting events is bad (if indeed it is) I would appreciate that as well.

• Downgoat: Wait, why are you using jQuery and then just a few lines later using querySelector?
• webDev: sorry. I'm new to` JQuery` and I was just told in stackoverflow that its a bad practice. Why is it a bad practice if JQuery is just a= Javascript` library?

Answer 1

It is bad practice as you add a new handler each time your event is fired.

To better understand this, try this:

$('p')
 .on('click', function(e) {
 console.log('1');
 $(this).on('click', function(e) {
 console.log('2');
 });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
 click me
</p>

Each time you click "click me", it should log one more "2".

A better way is to refactor your code to use a flag

(function() {
 var flag = true;
 $('#targetBtn')
 .on('mouseover', function(e) {
 $(this).find('img').attr('src', 'images/_hover.png');
 })
 .on('mouseout', function(e) {
 if(flag)
 $(this).find('img').attr('src', 'images/_mouseout.png');
 else
 $(this).find('img').attr('src', 'images/_selected.png');
 // or
 // $(this).find('img').attr('src', (flag ? 'images/_mouseout.png' : 'images/_selected.png'));
 })
 .on('click', function(e) {
 flag = false;
 $(this).find('img').attr('src', 'images/_selected.png');
 });
})();

See this demonstration to grasp the result:

(function() {
 var flag = true;
 $('#targetBtn')
 .on('mouseover', function(e) {
 console.log('src', 'images/_hover.png');
 })
 .on('mouseout', function(e) {
 if (flag)
 console.log('src', 'images/_mouseout.png');
 else
 console.log('src', 'images/_selected.png');
 // or
 //console.log('src', (flag ? 'images/_mouseout.png' : 'images/_selected.png'));
 })
 .on('click', function(e) {
 flag = false;
 console.log('src', 'images/_selected.png');
 });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="targetBtn">btn</a>

• michael.zech: Awesome explained. I hope you write more here.
• 200_success: I would invert the sense of the flag, initialize it to false, and rename it to buttonHasBeenClicked.