Onmouseover event is fired when not expected

I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover=alert('Hello');
     
    </script>
</body>

</html>

Solution

The property onmouseover expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: alert("hello"). So when the document loads, it evaluate that expression and the alert is shown, then a null value is assigned to the onmouseover property, that is the reason the alert only shows once.

For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k" style="border: 1px solid red">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover = function() {alert('Hello')};
     
    </script>
</body>

</html>