Events

Question 1

What is an event?

Answer 1

An event is the occurrence of anything the system considers significant. It can originate in the browser, the form, the keyboard, or any other subsystem, and it can also be generated by the application via a trigger. An event can be as simple as a key press or as complex as the completion of an Ajax request.

Question 2

How is .ready() different from .load()?

Answer 2

The ready event is similar to the document load event except that it doesn’t wait for all of the page’s images and other assets to load. It only waits for the DOM to be ready. Also, if the ready event fires before it is hooked, the handler code will be called at least once, unlike most events.

Question 3

How are all events except .ready() hooked?

Answer 3

$(selector).on(‘event name’, handling function); NOTE: More than one event can be included - $(“#clickA”).on(“mouseenter mouseleave”, eventHandler);

Question 4

What’s the main method to unhook an event handler?

Answer 4

$(elements).off(‘event name’, handling function); NOTE: The handling function is optional, and the event name is optional as well. If the event name is omitted, then all events attached to the elements are removed. If the event name is included, then all handlers for the specified event are removed.

Question 5

How and why do you add namespace(s) to an event?

Answer 5

$(“button”).on(“click.alpha”, handler); – OR – $(“button”).on(“click.alpha.beta”, handler); They allow us to distinguish between different handlers for the same event without using the handler function

Question 6

What does jQuery pass to every event handler?

Answer 6

The event object and the this object.

Question 7

Define the target property of the event object.

Answer 7

This is the element that triggered the event. This is not the same thing as the element bound to the event handler (the one pointed to by the this object). For example, if you click an tag, which doesn’t have a handler, but its parent,
, does, the event bubbles up to the parent. Under these conditions, event.target points to the tag, but the this object points to the
element.

Question 8

Define the relatedTarget property of the event object.

Answer 8

The relatedTarget property also points to an element when valid, but rather than being the element that triggered the event, it is an element that is somehow related to the event instead.

Question 9

Define the type property of the event object.

Answer 9

This property holds the name of the current event. It could come in handy if you use a single event handler for multiple events: function eventHandler(event) { console.log(“event type = “ + event.type); } $(“#clickA”).on(“mouseenter”, eventHandler); $(“#clickB”).on(“mouseleave”, eventHandler);

Question 10

Define the which property of the event object.

Answer 10

When a mouse or keyboard event occurs, this property can be used to tell which button or key was pressed. Let’s take a quick look at a code sample: $(“#itemName”).on(‘keypress’, function (event) { console.log(“key type: “ + event.which); });

Question 11

Define the pageX and pageY properties of the event object.

Answer 11

The pageX and pageY properties hold the mouse position relative to the upper-left corner of the page.

Question 12

Define the originalEvent property of the event object.

Answer 12

When an event occurs, jQuery normalizes it so that the events in every browser behave in the same manner. Occasionally, jQuery’s normalized event object lacks something that the original event object had and your application needs. jQuery places a complete copy of the original event object in the originalEvent property exactly for this reason.

Question 13

How do you pass data to an event

Answer 13

All you need to do is pass the data after the event name when hooking the event. You can pass nearly any type of data with a few caveats. First, if the data is a string, then you must also set the optional selector parameter that precedes it in the parameter list. If you don’t need the selector parameter, you can set it to null. Second, the data that you pass can’t be null or undefined.

Question 14

What does .trigger() do?

Answer 14

Executes all handlers and behaviors attached to the matched elements for the given event type.

Question 15

What does .on() do?

Answer 15

Attach an event handler function for one or more events to the selected elements. Shorthand methods(.click, .scroll, .mouseenter, etc) are convenient substitutes for .on, but are not sufficient for A) binding the same handler function to multiple events, B) providing data to the event handler, C) working with custom events, or D) passing an object of multiple events and handlers.

Question 16

How do you add multiple events sharing one even handler to an element?

Answer 16

$( “input” ).on(

“click change”, // Bind handlers for multiple events

function() {

console.log( “An input was clicked or changed!” );

}

);

Question 17

How do you bind multiple events with different handlers to one element?

Answer 17

Using key/value pairs:

$( “p” ).on({

“click”: function() { console.log( “clicked!” ); },

“mouseover”: function() { console.log( “hovered!” ); }

});

Question 18

How do you set up an event handler to run one function on the first event instance and a different function on all future event instances?

Answer 18

Using .one(). NOTE that if .one is bound to multiple event types then it will run once for each event type(click, scroll, etc.)

$( “p” ).one( “click”, firstClick );

function firstClick() {

console.log( “You just clicked this for the first time!” );

// Now set up the new handler for subsequent clicks;

// omit this step if no further click responses are needed

$( this ).click( function() { console.log( “You have clicked this before!” ); } );

}