Skip to content

Instantly share code, notes, and snippets.

@julianenochs
Created August 26, 2019 16:57
Show Gist options
  • Save julianenochs/40cac5a666d941a2c612c1c31b5569f5 to your computer and use it in GitHub Desktop.
Save julianenochs/40cac5a666d941a2c612c1c31b5569f5 to your computer and use it in GitHub Desktop.
Compare the vanilla JavaScript event listener (addEventListener) to the jQuery event listener(s).
jQuery will bind an event handler function for one or more events such as .on('click', function()) <- takes two arguments
or bind event handlers such as
.click(doTheThing)
.dblclick(doTheThing)
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?
.on('specify type of event here', doTheThing() {
function stuff here
})
What is the role of this within an event listener?
this refers to the element being selected - does this so that it doesn't have to search the DOM again for that element.
There are more than just the click event. What other events can be used in jQuery? Find at least five others. Can you think of examples for each of these?
.blur()
.focus()
.keyup()
.mouseover()
.scroll()
.submit()
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.
Event handler functions are passed an event object, and that object has properties and methods that you can use.
Ex: event.timeStamp (timestamp in ms of when event occured)
event.pageX (X-coordinates)
event.pageY (Y-coordinates)
Create a demo (in CodePen) using two different types of event listeners (a click event and something else).
For the .on() doc page, some of the method arguments are listed in square brackets. Why? Can you find other examples of this and explain why they are used?
selectors - When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment