Eventos JavaScript

[Alexis88]

Me alegra ver que lo hayas intentado.

Puedes utilizar distintos eventos en el párrafo sin la necesidad de utilizar otros elementos dentro de él. Por ejemplo, los eventos del mouse, como mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove, dblckick, click, contextmenu y las interfaces Wheel y Drag. Te sugiero leer la documentación de cada uno de ellos para que los comprendas mejor.

Para el siguiente ejemplo, utilizaré los eventos mouseover, mouseout, mouseup y mousedown, los cuales dispararán una función que mostrará el nombre del evento en un elemento aparte.

Código HTML:

<span id="evento"></span>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var nomEvento = document.querySelector("#evento"),
        handler = function(event){
            if (event.target.className == "ForosDelWeb"){
                nomEvento.innerHTML = event.type + "<br />" + nomEvento.innerHTML;
            }
        };
    
    this.addEventListener("mouseover", handler, false);
    this.addEventListener("mouseout", handler, false);
    this.addEventListener("mouseup", handler, false);
    this.addEventListener("mousedown", handler, false);
}, false);
 

Cuando haya cargado la página, tomamos al elemento en el cual se mostrará el nombre del evento ocurrido y, además, declararemos una función que será la encargada de realizar dicha acción. Líneas abajo, registramos los cuatro eventos en el documento y asignamos a la función previamente declarada para que se ejecute cuando ocurra cualquiera de los cuatro eventos.

Por defecto, el primer argumento que recibe la función manejadora del evento es al objeto del evento (a menos de que se especifique otro argumento como primero). Utilizando su propiedad target, tomamos al elemento en el cual ocurrió directamente el evento y si el nombre de su clase es igual al que establecimos en los párrafos, querrá decir que el evento ocurrió en uno de ellos, por lo que procedemos a mostrar el nombre del evento junto con los que ya ocurrieron previamente.

DEMO

Un saludo