I am wondering if you can add onmouseover + onmouseout to an if/else statement in Javascript for example:

function pan() {
        var ID = document.getElementById("grad");
        var change = ID.style.backgroundSize = "1200px 500px";
        var revert = ID.style.backgroundSize = "1080px 300px";

        if (){
            change.addEventListener("onmouseover");
        }else {
            revert.addEventListener("onmouseout");
        }

    }

I have looked everywhere and cannot see a definite yes or no, unless its in jQuery, and I haven't even looked at jQuery yet so please don't give an answer in jQuery.

If, it is possible, how do you do it?

Else, whats the alternative?

I am wondering if you can add onmouseover + onmouseout to an if/else statement in Javascript for example:

function pan() {
        var ID = document.getElementById("grad");
        var change = ID.style.backgroundSize = "1200px 500px";
        var revert = ID.style.backgroundSize = "1080px 300px";

        if (){
            change.addEventListener("onmouseover");
        }else {
            revert.addEventListener("onmouseout");
        }

    }

I have looked everywhere and cannot see a definite yes or no, unless its in jQuery, and I haven't even looked at jQuery yet so please don't give an answer in jQuery.

If, it is possible, how do you do it?

Else, whats the alternative?

• javascript
• dom-events

1 Answer 1

It is possible, but your code is not correct, here the corrected code:

     function pan() {
        var ID = document.getElementById("grad");
        var change = ID.style.backgroundColor = "red";
        var revert = ID.style.backgroundColor = "black";

        if( true){
            ID.addEventListener("mouseover", function(){alert("EVENT OVER")});
        }else {
            ID.addEventListener("mouseout", function(){alert("EVENT OUt")});
        }
    }

You just can bind Events on elements.

Here is some documentation to the addEventListener function https://developer.mozilla/en-US/docs/Web/API/EventTarget/addEventListener

But I assume you would want to do something like this (I use backgroundColor, so the example can be seen better):

var ID = document.getElementById("grad");

function change (event){
  event.target.style.backgroundColor = "red";
}

function revert (event){
  event.target.style.backgroundColor = "white";
}

ID.addEventListener("mouseover", change);
ID.addEventListener("mouseout", revert);

<div id="grad" style="border:1px solid black">sdfgsdfg</div>