Tutorial by Examples | RIP Tutorial

Attach and Detach Event Handlers

Attach an Event Handler Since version 1.7 jQuery has the event API .on(). This way any standard javascript event or custom event can be bound on the currently selected jQuery element. There are shortcuts such as .click(), but .on() gives you more options. HTML <button id="foo">b...

jQuery • Events

Delegated Events

Let's start with example. Here is a very simple example HTML. Example HTML <html> <head> </head> <body> <ul> <li> <a href="some_url/">Link 1</a> </li> &l...

jQuery • Events

Document Loading Event .load()

If you want your script to wait until a certain resource was loaded, such as an image or a PDF you can use .load(), which is a shortcut for shortcut for .on( "load", handler). HTML <img src="image.jpeg" alt="image" id="image"> jQuery $( "#imag...

jQuery • Events

Events for repeating elements without using ID's

Problem There is a series of repeating elements in page that you need to know which one an event occurred on to do something with that specific instance. Solution Give all common elements a common class Apply event listener to a class. this inside event handler is the matching selector elemen...

jQuery • Events

originalEvent

Sometimes there will be properties that aren't available in jQuery event. To access the underlying properties use Event.originalEvent Get Scroll Direction $(document).on("wheel",function(e){ console.log(e.originalEvent.deltaY) // Returns a value between -100 and 100 depending o...

jQuery • Events

Switching specific events on and off via jQuery. (Named Listeners)

Sometimes you want to switch off all previously registered listeners. //Adding a normal click handler $(document).on("click",function(){ console.log("Document Clicked 1") }); //Adding another click handler $(document).on("click",function(){ console.log(&q...

jQuery • Events