Soy un programador de JavaScript novato. ¿Alguien puede hacerme entender cómo funciona esto?
¿Cuál es la diferencia entre mouseover y onmouseover en JavaScript? ¿Podemos intercambiar su uso? Si no, ¿cómo sabemos cuál usar y dónde?
ejemplo mouseover :
function showAlert() {} button.addEventListener('mouseover', showAlert); ejemplo onmouseover :
function changeColor() {} titleHeader.onmouseover = changeColor;Básicamente, ambos son iguales según lo que hacen, pero las diferencias surgen cuando hablamos de lo que hacen. puede usar cualquiera de ellos según su deseo, pero el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores, lo cual es necesario cuando desea usar el mouseover. La sintaxis de addEventListener(), que es un elemento dom, es addEventListener(evento, función)
event(obligatorio)-> Una cadena que especifica el nombre del evento. Nota: No utilice el prefijo "on". Por ejemplo, utilice "mouseover" en lugar de "mouseover". function(obligatorio)->Especifica la función que se ejecutará cuando ocurra el evento. p.ej:
<html> <body> <p>This example uses the addEventListener() method to attach a "mouseover" and "mouseout" event to a h1 element.</p> <h1 id="demo">Mouse over me</h1> <script> document.getElementById("demo").addEventListener("mouseover", mouseOver); function mouseOver() { document.getElementById("demo").style.color = "red"; } </script> </body> </html> **Dom Event onmouseover** <body> <h1 id="demo">Mouse over me</h1> <script> document.getElementById("demo").onmouseover = function(){mouseOver()}; function mouseOver() { document.getElementById("demo").style.color = "red"; } </script> </body>Por último, me gustaría agregar que puede usar addEventListener dentro del script, solo que no puede usarlo dentro de su cuerpo html; sin embargo, en el caso de un evento Dom, puede usarlo dentro de html y también usando una sintaxis como, por ejemplo:
<html> <body> <p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1 element.</p> <h1 id="demo" onmouseover="mouseOver()" >Mouse over me</h1> <script> function mouseOver() { document.getElementById("demo").style.color = "red"; } </script>