Level 42
Level 44
87 words 0 ignored
Ready to learn
Ready to review
Ignore words
Check the boxes below to ignore/unignore words, then click save at the bottom. Ignored words will never appear in any learning session.
Ignore?
describe the function of the altKey property of the event object
Returns whether or not the "ALT" key was pressed when an event was triggered
describe the function of the button property of the event object
Returns which mouse button was clicked when an event was triggered
describe the function of the clientX property of the event object
Returns the horizontal coordinate of the mouse pointer when an event was triggered
describe the function of the clientY property of the event object
Returns the vertical coordinate of the mouse pointer when an event was triggered
describe the function of the ctrlKey property of the event object
Returns whether or not the "CTRL" key was pressed when an event was triggered
describe the function of the metaKey property of the event object
Returns whether or not the "meta" key was pressed when an event was triggered
describe the function of the relatedTarget property of the event object
Returns the element related to the element that triggered the event
describe the function of the screenX property of the event object
Returns the horizontal coordinate of the mouse pointer when an event was triggered
describe the function of the screenY property of the event object
Returns the vertical coordinate of the mouse pointer when an event was triggered
describe the function of the shiftKey property of the event object
Returns whether or not the "SHIFT" key was pressed when an event was triggered
describe the function of the bubbles property of the event object
Returns a Boolean value that indicates whether or not an event is a bubbling event
describe the function of the cancelable property of the event object
Returns a Boolean value that indicates whether or not an event can have its default action prevented
Returns the element whose event listeners triggered the event
describe the function of the currentTarget property of the event object
describe the function of the eventPhase property of the event object
Returns which phase of the event flow is currently being evaluated
Returns the element that triggered the event
describe the function of the target property of the event object
Returns the time stamp
describe the function of the timeStamp property of the event object
Returns the name of the event
describe the function of the type property of the event object
load (UI Event)
Web page has finished loading. It can also fire on nodes of other elements that load, such as images, script, or objects.
unload (UI Event)
Web page is unloading (usually because a new page was requested)
error (UI Event)
Browser encounters a JavaScript error or an asset doesn't exist
resize (UI Event)
Browser window has been resized
scroll (UI Event)
User has scrolled up or down the page; it can relate to entire page or specific element on the page (such as a textarea with scrollbars).
keydown (Keyboard Event)
User first presses a key (repeats while key is depressed)
keyup (Keyboard Event)
User releases a key
keypress (Keyboard Event)
Character is being inserted (repeats while key is depressed). i.e. fires when a user presses a key that would result in a character being shown on the screen (would not show when user presses the arrow keys)
click (Mouse Event)
User presses and releases a button over the same element. It will also fire if the user presses the Enter key on the keyboard when an element has focus.
dblclick (Mouse Event)
User presses and releases the primary mouse button twice in quick succession over the same element
mousedown (Mouse Event)
User presses a mouse button while over an element
mouseup (Mouse Event)
User releases a mouse button while over an element
mousemove (Mouse Event)
User moves the mouse around an element (not on a touchscreen). This event is repeatedly fired
mouseover (Mouse Event)
User moves the mouse over an element (not on a touchscreen) i.e. when cursor was outside element and then is moved inside it
mouseout (Mouse Event)
User moves the mouse off an element (not on a touchscreen) i.e. when cursor was inside element and this is moved outside it or a child of it
Element gains focus
focus / focusin (Focus Event)
Element loses focus
blur / focusout (Focus Event)
input (Keyboard Event / Form Event)
Value in any <input> or <textarea> element has changed (IE9+) or any element with the 'contenteditable' attribute. [for older browsers use 'keydown' as fallback]
change (Form Event)
Value in select box, checkbox, or radio button changes (IE9+)
submit (Form Event)
User submits a form (using a button or a key)
reset (Form Event)
User clicks on a form's reset button (rarely used these days)
cut (Form Event)
User cuts content from a form field
copy (Form Event)
User copies content from a form field
paste (Form Event)
User pastes content into a form field
select (Form Event)
User selects some text in a form field
DOMSubtreeModified (Mutation Event)
Change has been made to document
DOMNodeInserted (Mutation Event)
Node has been inserted as a direct child of another node
DOMNodeRemoved (Mutation Event)
Node has been removed from another node
DOMNodeInsertedIntoDocument (Mutation Event)
Node has been inserted as a descendant of another node
DOMNodeRemovedFromDocument (Mutation Event)
Node has been removed as a descendant of another node
UI Events
Event type: Occurs when a user interacts with the browser's user interface (UI), or browser window, rather than the HTML web page contained within it. e.g., a page having loaded or the browser window being resized
Keyboard Events
Event type: Occurs when a user interacts with the keyboard (see also 'input' event)
Mouse Events
Event type: Occurs when a user interacts with a mouse, trackpad, or touchscreen
Focus Events
Event type: Occurs when an HTML element (e.g., a link or form field) gains or loses focus
Form Events
Event type: Occurs when a user interacts with a form element
Mutation Events
Event type: Occurs when the DOM structure has been changed by a script. Whenever elements are added to or removed from the DOM, its structure changes: this change triggers this type of event. (Currently being replaced by Mutation Observers)
Mutation Observers
Event type: Occurs when the DOM structure has been changed by a script. Designed to wait until a script has finished its task before reacting, then report the changes as a batch (rather than…
fired / raised
Terminology: When an event has occurred, it is often described as having _______ or been _______
trigger
Terminology: Events are said to _______ a function or script (when a click event fires on an element, it can _______ a script)
event handling
Terminology: 3 steps involved in getting user interaction with HTML to trigger JavaScript code: 1) select the element node(s) you want the script to respond to; 2) indicate which event on the selected node(s) …
HTML Event Handler
Terminology: 1 of 3 types of Event Handlers: bad practice to use this type. Early versions of HTML included a set of attributes that could respond to events on the element they were adde…
Traditional DOM Event Handler
Terminology: 1 of 3 types of Event Handlers: allow you to separate JavaScript from HTML, but you can only attach a single function to any event. If more than 1 script is used on…
DOM Level 2 Event Listener
Terminology: 1 of 3 types of Event Handlers: this is the favored type of handling events. Allow one event to trigger multiple functions.
preventDefault() / returnValue=false
Event object method for preventing the default behavior of an event (such as keeping a user on the same page after a link is clicked or form is submitted) / separate name for IE5-8
stopPropagation() / cancelBubble=true
Event object method to stop an event from bubbling up (i.e. when an event starts at the most specific node and flows outward to the least specific one = event bubbling) / separate name for IE5-8
return false;
Event object method: combination of preventDefault() and stopPropogation() .... but blocks subsequent code within that function and moves to next statement after the function was called
DOMContentLoaded (HTML5 Event)
Event fires when the DOM tree is formed (images, CSS, and JavaScript might still be loading). Because it does not wait for scripts to load, the DOM tree will not contain any HTML that w…
hashchange (HTML5 Event)
Event fires when the URL has changes (without the entire window refreshing). Handler works on the window object, and after firing, the event object will have oldURL and newURL properties that hold the url before and after the event.
beforeunload (HTML5 Event)
Event fires on the window object before the page is unloaded. Helpful to let a user know that changes on a form they completed have not been saved.
touchstart (BOM Event)
Browser Object Model (BOM) event that deals with touchscreens: event is fired when a touch point is placed on the touch surface
touchend (BOM Event)
Browser Object Model (BOM) event that deals with touchscreens: event is fired when a touch point is removed from the touch surface
touchmove (BOM Event)
Browser Object Model (BOM) event that deals with touchscreens: event is fired when a touch point is moved along the touch surface
orientationchange (BOM Event)
Browser Object Model (BOM) event: event is fired when the orientation of the device has changed
Got help from Bruno and Greg on this topic. To have it listen to the dynamically created 'update' button.
Here we dynamically created an input field once they pushed the edit button. However, we intelligently placed an Event Listener on the parent <ul> to listen for
$('.drop-box').on('click', 'img', function(event){
Another example of event delegation. On the class of drop-box, we attach an event listener who will listen to any of its children that is an 'img'. We use this technique because the img was dynamically created.
false
T/F: scripts marked as async are guaranteed to execute in the order in which they are specified.
var emailField = getElementById("email");
Do the code for the 'onfocus' event for an email text box to set the emailField.value to 'emptyl string' if it contains the value of "your email".
emailField.onblur = function () {
Do the code for the 'onblue' event for an email text box to set the emailField.value to 'your email' if the emailField.value content is empty.
document.onclick = function() {
Code the least desirable but most often used is the 'inLine' event handler:
true
T/F: loading an external JS file will halt the processing of the page while the external file is interpreted.
window object
The on load event operates on which element of the DOM?
function prepareEventHandlers() {
Code a function called prepareEventHandlers.
window.onload = function () {
Code the onload event to call a function named 'prepareEventHandlers';
Timers are use for:
trigger procedure to run later like slide shows and carousels
Are timers officially events in JavaScript?
They look like it but they are not.
setInterval( myFunction, interval in milisec);
What are the two methods to call timers
function simpleMessage() {
Code a timer using setTimeout that pops up an alert box in 5 seconds.
var imageIndex = 0;
Code a timer to change images inside an array every 5 seconds.
var intervalHandle = setInterval(changeImage, 5000);
Write two lines of code to clear setInterval(changeImage, 5000) using the method 'clearInterval(intervalHandle)'.
var myImage = document.getElementById("mainImage");
Put all the code together:
