ohnomalone/JQuery-Events.md

## JQuery-Events.md

      
    Raw
  

              JQuery-Events.md
            
          
    JQuery - Events
1. Compare the vanilla JavaScript event listener (addEventListener) to the jQuery event listener(s).
vanilla JavaScript event listener:
var clearBtn = document.querySelector('.guesser-challenger-buttons-clear');
clearBtn.addEventListener('click', function(){};
jQuery event listener(s): $('.heading').on('click', function(parameters){
things happening
};
2. What is the one jQuery event listener that can be used to listen for many types events. How do you specify the type of event?
example 1: - jquery can take in multiple events that you want to trigger the function over/on an a specific element.
$('#element').on('keyup keypress blur change', function(e) {
// e.type is the type of event fired
});
example 2: - jquery can have different functions fire off as different events happen over/on a specific function
$( "div" ).on({
mouseenter: function() {
console.log( "hovered over a div" );
},
mouseleave: function() {
console.log( "mouse left a div" );
},
click: function() {
console.log( "clicked on a div" );
}
});
3. What is the role of this within an event listener?
'this' refers to the jquery object being return or the DOM element that is being selected by the JQuery selector.
4. There are more than just the click event. What other events can be used in jQuery?
Find at least five others:
1) keyup - saving to local storage when things are typed
2) keypress - only want text values entered in a certain area and not have other keys do anything
3) blur - take the focus away from what the user was just on
4) change
5) mouseenter - have something happen -  hover() is an inbuilt method in jQuery which is used to specify two functions to start when mouse pointer move over the selected element.
5. What is the event object, and what can we use it for in event listeners? Console log the event object in an example and explore what types of information it gives you.
JQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.
6. Create a demo (in CodePen) using two different types of event listeners (a click event and something else).
https://codepen.io/ohnomalone/pen/JjPWxOW