CODEWITHSUNDEEP
javascript
Torianna Tifft
Torianna Tifft

Reputation: 25

How do I correctly use the mouseleave function in my code?

Okay so I need to create a div with a red background that then registers the "Mouseleave" event which will then call a function that will display the following text "MouseLeave event fired". My goal is that when I move my mouse over my div and then move it away I will get an alert that says "MouseLeave event fired". Then when I click on my div again it will unregister the MouseLeave event that way when I move my mouse over the div nothing will happen. Here is my code I have so far:

function attachEvent(myObject) {

     // to do - get state of listener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
     alert("Mouse");

     // to do - if previously called addEventListener, then I now want to call removeEventListener
     myObject.removeEventListener("onmouseleave", function attachEvent(){}, false);
      
     // to do - if previously called removeEventListener, then I now want to call addEventListener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
}
div {background-color:red;padding:100px;max-width:25%;margin:auto}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

When I move my mouse out of the div the alert should pop up, but it's not. What am I doing wrong? Please keep the code like this for now as I'm not familiar with the getelementbyid yet.

Upvotes: 1

Views: 3418

Answers (4)

Beingnin
Beingnin

Reputation: 2422

This is more easy using jquery:

$(myObject).mouseleave(function(){alert('MouseLeave event fired')});

Upvotes: 0

axiac
axiac

Reputation: 72256

The first argument of EventTarget.addEventListener() is the type of the event to listen to.

There is no onmouseenter event. onmouseevent is the internal name of the property that stores the event handler you install. The name of the event is mouseenter.

Your code should read:

myObject.addEventListener("mouseleave", function attachEvent(){}, false);

But the event handler you install using this code doesn't do anything; you won't be able to know when it is invoked. For testing you should add a call to console.log() inside the handler:

myObject.addEventListener("mouseleave", function(){ console.log('Mouse is out of the house.'); }, false);

Upvotes: 0

void
void

Reputation: 36703

  • You are not passing this correctly, this in your case is a global context.

  • for removeEventListener to work, callback function can not be a anonymous function.

  • Keep a flag to check whether you should add event or remove event. This flag will toggle its value on each click.

  • Use mouseleave instead of onmouseleave, later one is used when event you are attaching is inline to the element.

var eventExists = false;

function mouseLeft() {
  console.log("Mouse left!");
}

function attachEvent() {
  if (!eventExists) {
    this.addEventListener("mouseleave", mouseLeft);
  } else {
    this.removeEventListener("mouseleave", mouseLeft);
  }
  eventExists = !eventExists;
}
<div style="background-color:red;padding:10px" ; id="cycle" ; onclick="attachEvent.call(this)">
  <h2 style="text-align:center">Click to cycle event listener</h2>
</div>

Upvotes: 4

Omar Muscatello
Omar Muscatello

Reputation: 1301

The correct name of the event is mouseleave. onmouseleave is used when you set the event via HTML attributes (like you do with onclick).

I suggest you to define a function (onMouseLeave in my code below) and use it as parameter of addEventListener and removeEventListener.

Finally, you don't need to set the useCapture parameter to false (for both addEventListener and removeEventListener) because false is the default value.

var eventAttached = false;

function attachEvent(myObject) {

    if(eventAttached === false){
      myObject.addEventListener("mouseleave", onMouseLeave);
    } else {
      myObject.removeEventListener("mouseleave", onMouseLeave);
    } 
    
    eventAttached = !eventAttached;
}

function onMouseLeave(){
  alert("Mouse leave");
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div style="background-color:red;padding:100px"; id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions