HTML Event Basics

1 - Capturing & Bubbling

Capturing : The event travles down from the root node to the children

    element.addEventListener('click',doSomething,true);
					    

    element.addEventListener('click',doSomething,false);
					    

HTML Event Basics

1 - Capturing & Bubbling

    var button = document.getElementById('BasicsButton');
                         
    button.addEventListener('click',function(){
        alert("Button"); 
    },true);
                         
    button.parentNode.addEventListener('click',function(){
        alert("Parent");     
    },true);
                    

HTML Event Basics

1 - Capturing & Bubbling

    var button2 = document.getElementById('BasicsButton2');       
                                           
    button2.addEventListener('click',function(){
        alert("Button"); 
    },false);
                         
    button2.parentNode.addEventListener('click',function(){
        alert("Parent");     
    },false);
                    

HTML Event Basics

Event Control

If this method is called, the default action of the event will not be triggered.

                                               
    var button3 = document.getElementById('BasicsButton3');
    button3.addEventListener('click',button3Clicked, false);
                         
    function button3Clicked(e){
        alert("Link Clicked");
        e.preventDefault();
    }
                    

HTML Event Basics

Event Control

Prevents the event from bubbling up the DOM tree.

                                               
    var button4 = document.getElementById('BasicsButton4');
    button4.addEventListener('click',button4Clicked, false);
    button4.parentNode.addEventListener('click',button4ClickedParent, false);
                         
    function button4Clicked(e){
        alert("Button Clicked");
        e.stopPropagation();
    }
                         
    function button4ClickedParent(e){
        alert("Button Clicked In Parent");
    }
                    

HTML Event Basics

Event Control

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

                                               
    var button5 = document.getElementById('BasicsButton5');
    button5.addEventListener('click',button5Clicked, false);
    button5.addEventListener('click',button5Clicked2, false);
                         
    function button5Clicked(e){
        alert("Button Clicked 1");
        e.stopImmediatePropagation();
    }
                         
    function button5Clicked2(e){
        alert("Button Clicked 2");
    }
                    

jQuery Functions

jQuery Functions

Attach an event handler function for one or more events to the selected elements.

                                               
    $('#jfunButton1').on('click',function(e){
        $(this).toggleClass('red');
    });
                    

jQuery Functions

Remove an event handler.

                                               
    $('#jfunButton2').on('click',function(e){
        $(this).toggleClass('blue');
    });
                         
    $('#jfunButton2').off('click');
                    

jQuery Functions

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

                                               
    $('#jfunButton3').one('click',function(e){
        $(this).toggleClass('green');
    });
                    

jQuery Functions

Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

                                               
    $('#GoogleInput').on('input',function(){
        if($(this).val() == 'lol'){
            $('#GoogleForm').submit();
        }
    });
                         
    $('#GoogleForm').submit(function(){
        $('#GoogleInput').val('Google');
    });