jQuery_Project/views/events.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<div class="col-md-10 col-md-offset-1">
        <h1>Eventos con jQuery</h1>
        <p>jQuery facilita la forma de interactuar con los elementos dentro de 
            una página facilitando el uso de los eventos de forma bastante intuitiva.
            Podéis para ello consultar la <a href="http://api.jquery.com/category/events/">documentación oficial</a>. 
        </p>
        <p>
            Podéis también ir a la <?php  echo "<a href='index.php?do=showCheat'>"; ?>sección de eventos</a> 
            en la página de Cheatsheet para ver el tipo de eventos que existen 
            y como usarlos además de este tutorial.
        </p>
        <p>Las páginas web actuales son interactivas, es decir, los usuarios 
            pueden realizar un gran número de acciones y los navegadores pueden
            capturarlas en forma de eventos. Mover el ratón por la página, hacer
            click en un elemento o escribir en un input text. Pero también hay 
            otro gran número de eventos que ocurren sin intervención del usuario, 
            como cuando la página es cargada, cuando un vídeo se empieza a 
            reproducir o termina, etc. En cualquier momento en que ocurre algo
            importante en la página, un evento es disparado, y los navegadores 
            capturan el momento en que ha pasado. Esto permite a los desarrolladores 
            escuchar a este tipo de eventos y reaccionar acorde a ello.
        </p>
        <h3>Eventos Básicos de jQuery</h3>
        <p>
            jQuery ofrece métodos para la mayoría de eventos nativos de los 
            navegadores. Estos métodos que incluyen “.click()”, “.focus()” o 
            “.mouseenter()” son abreviaturas para el método “.on ()” de jQuery. 
            El método on es útil para vincular el mismo controlador de la función a varios eventos,
            cuando se desea proporcionar datos a los controladores de eventos, cuando se trabaja 
            con eventos personalizados o cuando se desea pasar un objeto de varios
            eventos y controladores.
        </p>
        <p id="especial">Este párrafo es especial, no lo toques mucho.</p>
        <pre>
        <code>
$( "#especial" ).click(function() {
    alert( "Has pulsado sobre un párrafo" );
});

$( "#especial" ).on( "click", function() {
    alert( "Has hecho click sobre un párrafo" );
});
            </code>
        </pre>
        <br>
        <h3>Un Elemento con múltiples Eventos</h3>
        <p>
            Para que elemento tenga asociado varios eventos, existen varias formas 
            de conseguirlo. Aunque la más fácil y efectivas es usar ".on()".
        </p>
        <p id="no-especial">Este párrafo no es especial pero haz click o pasa por encima 
            para comprobarlo
        </p>
        <pre>
        <code>
$( "#no-especial" ).click(holaMundo).mouseenter(holaMundo2);

function holaMundo() {
    alert("Hola Mundo");
}

function holaMundo2() {
    alert("Hola Mundo2");
}

$( "#no-especial" ).on( "click mouseenter", function() {
    alert( "Has hecho click o has pasado por encima de un párrafo" );
});
            </code>
        </pre>
        <br>
        <p>También se puede asignar eventos con diferentes funciones</p>
        <p id="pulsar-p">Púlsame o pasa por encima</p>
        <pre>
        <code>
$( "#pulsar-p" ).on({
    mouseover: function() { 
        alert( "Has pasado por encima de un párrafo" );
    },
    click: function(event) { 
        alert( "Has hecho click sobre un párrafo" );
        event.stopPropagation();
    },
    mouseleave: function() {
        alert("Has abandonado el párrafo");
    }
});
            </code>
        </pre>
        <br>
        <h3>Pasar parámetros al Evento</h3>
        <p>Puedes pasar datos de manera fácil usando "on()".</p>
        <p id="hola">Párrafo dice hola</p>
        <p id="adios">Párrafo dice adios</p>
        <pre>
        <code>
$( "#hola" ).on( "click", {
    foo: "hola"
}, function( event ) {
    alert( "Párrafo hola dice: " + event.data.foo );
});

$( "#adios" ).on( "click", {
    foo: "adios"
}, function( event ) {
    alert( "Párrafo adios dice: " + event.data.foo );
});
            </code>
        </pre>
        <br>
        <h3>Dentro del controlador del Evento</h3>
        <p>Cada controlador del evento recibe un objeto “event”, el cual contiene
            numerosas propiedades y métodos. Este objeto es usado mayormente para 
            evitar la acción predeterminada del evento a través del método 
            .preventDefault (). Sin embargo, el objeto “event” contiene otras 
            propiedades y métodos útiles, incluyendo:
        </p>
        <ul>
            <li><a href="https://api.jquery.com/event.pageX/">pageX</a>, <a href="https://api.jquery.com/event.pageY/">pageY</a>: Devuelve la posición del ratón en el momento que ocurre el evento relative a la parte superior izquierda de la página.</li>
            <li><a href="https://api.jquery.com/event.type/">type</a>: El tipo de evento, por ejemplo “click”.</li>
            <li><a href="https://api.jquery.com/event.which/">which</a>: El botón o tecla que fue pulsado.</li>
            <li><a href="https://api.jquery.com/event.data/">data</a>: Cualquier dato que se pase cuando el evento se fija al elemento.</li>
            <li><a href="https://api.jquery.com/event.target/">target</a>: El elemento DOM que inicia el evento.</li>
            <li><a href="https://api.jquery.com/event.preventDefault/">preventDefault()</a>: Evita la acción predeterminada de un evento, por ejemplo, abrir un enlace.</li>
            <li><a href="https://api.jquery.com/event.stopPropagation/">stopPropagation()</a>: Evita que el evento se propague a otros elementos de mayor jerarquía en el árbol DOM.</li>
        </ul>
        <p>Aquí podemos ver en acción ".preventDefault()".</p>
        <a href="www.google.com" id="google">Ve a la página de inicio de Google</a>
        <pre>
        <code>
$(function() {
    $( "#google" ).click(function( event ) {
        event.preventDefault();
        alert("NO");
    });
});
            </code>
        </pre>
        <br>
        <h3>Añadiendo Eventos a Nuevos Elementos de la Página</h3>
        <p>Es importante tener en cuenta que .on () sólo puede crear listeners 
            de eventos en elementos que existen al momento de configurar los 
            listeners. Elementos similares creados después de que se establezcan 
            los listeners de eventos no capturarán automáticamente los eventos 
            que se hayan configurado anteriormente. Por ejemplo:
        </p>
        <pre>
        <code>
$( document ).ready(function(){
    // Creamos un evento click en todos los button con class alert
    // que existen en el DOM en el momento de que la instrucción se ejecute
    $(".alert").click(function(){
           alert("Has pulsado un botón con alert jeje");
           // Ahora se crea un nuevo elemento button con alert class
           // Pero al haberse creado después, no tiene el mismo evento asociado
           $( "&lt;button class='alert'&gt;Alert!&lt;/button&gt;" ).appendTo( "#alert-buttons" );
        });
});
            </code>
        </pre>
        <br>
        <div id="alert-buttons">
            <button class="alert">Púlsame</button>
        </div>
        <p>Por ello es importante que veamos a continuación la Delegación de Eventos</p>
        <h3>Delegación de Eventos</h3>
        <p>La Delegación de Eventos permitirá asociar un listener de evento a 
            un elemento padre que se disparará para todos los descendientes que 
            coincide con el selector, aunque esos descendientes existan ahora o
            en el futuro.
        </p>
        <pre>
        <code>
$( document ).ready(function(){
    $( "#alert-buttons2" ).on( "click", ".alert2", function() {
        alert("Has pulsado un botón con alert jeje");
        $( "&lt;button class='alert2'&gt;Alert!&lt;/button&gt;" ).appendTo( "#alert-buttons2" );
    });
});
            </code>
        </pre>
        <br>
        <div id="alert-buttons2">
            <button class="alert2">Púlsame mucho</button>
        </div>
        <h3>Eventos de usar y tirar</h3>
        <p>A veces se necesita algún tipo de evento que solo se vaya a usar una vez.
            Para ello en vez de utilizar un contador o algún tipo de variable booleana
            podemos utilizar el método <a href="http://api.jquery.com/one/">"one()"</a>.
        </p>
        <pre>
        <code>
$( document ).ready(function(){
    $( "p" ).one( "click", function() {
        alert("Solo me puedes pulsar una vez, lo siento");
    });
});
            </code>
        </pre>
        <br>
        <button id="b-unico">Este botón es único</button>
        <br>
        <h3>Cambiando la funcionalidad</h3>
        <p>Otra funcionalidad puede ser que después de un primer uso, a este elemento
            se le pueda asociar otro tipo de evento.
        </p>
        <pre>
        <code>
$( document ).ready(function(){
    $( "#b-nounico" ).one( "click", firstClick);
});

function firstClick() {
    alert( "Me puedes pulsar más veces!!!!!" );
    
    // Ahora creamos un nuevo controlador para el botón
    $( this ).click( function() { alert( "Te lo dije, púlsame todas las veces que quieras!" ); } );
}
            </code>
        </pre>
        <br>
        <button id="b-nounico">Este botón no de un solo uso</button>
        <h3>Desvincular Eventos</h3>
        <p>Para eliminar un evento de un element se usa el método “.off()” y se 
            pasa al evento que queramos. 
        </p>
        <pre>
        <code>
$( document ).ready(function(){
    $( "#hola-b" ).click(holaClase);
    
    $("#poner-hola").click(function() {
        $("#hola-b").on("click", holaClase);
    });
    
    $("#quitar-hola").click(function() {
        $("#hola-b").off("click");
    });
});

function holaClase() {
    alert("Hola");
}
            </code>
        </pre>
        <br>
        <button id="hola-b">Hola</button>
        <button id="poner-hola">Poner el Hola</button>
        <button id="quitar-hola">Quitar el Hola</button>
        <br>
        <br>
        <p>Como ".on()" se puede desvincular varios eventos de un elemento.</p>
        <pre>
        <code>
$( document ).ready(function(){
    $( "#hola-b2" ).click(holaClase).mouseenter(holaClase);
    
    $("#poner-hola2").click(function() {
        $("#hola-b2").on("click", holaClase);
    });
    
    $("#quitar-hola2").click(function() {
        $("#hola-b2").off("click mouseenter");
    });
});

function holaClase() {
    alert("Hola");
}</code>
        </pre>
        <br>
        <button id="hola-b2">Hola</button>
        <button id="poner-hola2">Poner el Hola</button>
        <button id="quitar-hola2">Quitar el Hola</button>
        <br>
        <h3>Event Helpers</h3>
        <p>jQuery ofrece funciones auxiliares que sirve para facilitar el uso de 
            los métodos ya implementados. En este caso, la función auxiliar es 
            <a href="https://api.jquery.com/hover/">“.hover()”</a>.
        </p>
        <h5>.hover()</h5>
        <p>Este método te permite pasar una o dos funciones que se activarán con 
        los eventos mouseenter y mouseleave de un elemento. Si pasas una función, 
        los dos eventos activarán la función, pero si pasas dos funciones,
        la primera será ejecutada con mouseenter y la segunda con mouseleave.
        </p>
        <ul>
            <li class="onefun">Este item de la lista tiene asociada una función.</li>
            <li class="onefun">Este item de la lista tiene asociada una función.</li>
            <li class="twofun">Pero este tiene asociado dos funciones.</li>
            <li class="twofun">Pero este tiene asociado dos funciones.</li>
        </ul>
        <pre>
        <code>
$( document ).ready(function(){
    $( ".onefun" ).hover(function() {
        $( this ).fadeOut( 100 );
        $( this ).fadeIn( 500 );
    });
    $( ".twofun" ).hover(
        function() {
            $( this ).append( $( "<span> ***</span>" ));
        }, function() {
            $( this ).find( "span:last" ).remove();
        }
    );
});
}</code>
        </pre>
        <br>

    </div>
<script src="../jQueryProject/assets/js/events.js"></script>