Events
what events work with the *window object*
UI events related to the browser window such as a page finished loading or use scrolls page
what are the most comonly used events?
W3C DOM events there are others in the HTML 5 specification and browser specific events.
the order in which events fired is called what?
event flow and events flow in two directions
what are the 3 step known as?
event handling
what happens when a event occurs on an element?
it can trigger a JavaScript function and the function can change the web page in a way to make it feel interactive to the user
what does the event object do?
it contains information about an event that fires such as: which element the event happened on which key was press for a keypress event what part of the viewport the user clicked for a click event
how is the event object handled in IE 5-8
it is not passed automatically to event handler/listener function but is available as a child to the window object function checkUsername (e){ if(!e){ e = window.event; } }
what happens if you add event listeners to many elements?
it will use lots of memory and slow the computers performance
what does event handlers do?
let you indicate which event you are waiting for on any particular element
what does the *return false* statement do?
prevents the default behavior and prevents event form bubbling to its ancestors or capturing any further and work on all major browsers
how would you stop a an event from bubbling up to its ancestor elements and for what reason?
■ you would use the *stopPropagation()*method of the event object ■ for reasons that there may be separate event handlers responding to the same elements as the containing element
what is event capturing?
when the event starts at the least specific node and flows inward to the most specific one. Not supported in IE8 or earlier
what is the downfall of using the *return false* statement?
when the interpreter comes across it it stops processing code in the code block and moves to the next statement after the function was called, using preventDefault() is the better choice in most cases
what do you do if you need to assign even listeners to several elements?
you use a function what will return a reference to the element the even happened on function getEventTarget(e){ if (!e){ e = window.event; } return e .target || e.srcElement; }
what are some of the default behaviors the the *preventDefault()* method can change?
■ prevent a new page from opening when a link has been clicked ■ prevent a new page from opening when a form is submitted
what can the methods of the event object change?
■ the default behavior of elements ■ and how elements ancestors respond to events
what are the benefits of event delegation?
■ when adding new elements to the DOM tree, ancestor elements delegate new event handlers ■ solves IE 8 issues with the *this* keyword used to identify an event's target ■ requires fewer functions to be written and fewer ties between code and the DOM
what are the 3 types of event handlers?
1. HTML Event Handlers: elements had attributes to respond to events, attribute names matched event names and their value called the function example: <a onClick = 'hide()'> (calls the function hide() ) 2. Traditional Dom Event Handlers: It has strong support in all major browsers, can only attach a single function to any event, if more than one script used it may cause errors 3. DOM level 2 Event Listeners: It is the preferred method of event handling, allows one event to trigger multiple functions, less likely to be script conflicts
what are the 3 steps involved in triggering JavaScript code?
1. Select the element node using a DOM query 2. Specify event on the node that will trigger event called binding an event to a DOM node 3. Call the code to be run when the event occurs which can be named or an anonymous function
what are the methods of the event object?
1. preventDefault(): cancels default behavior of the event(if it can be canceled) 2. stopPropagation():Stop the event from bubbling or capturing any further IE 5-8 1. returnValue 2. cancelBubble
4 step process of event listeners with parameters
1. reference to the event object automatically passed to an anonymous function the parameter must be named (e) 2.reference to the event object can be passed onto the named function given in the first parameter 3.the named function receives the reference o the event object as the first parameter 4.it can now be used by the name in the named function
3 step process of event listeners without parameters
1. reference to the event object automatically passed to event listener function call 2. to where the function is defined, parameter name (e) for event 3. parameter name can be used in the code block of the function and the properties and methods of the event object can now be used
what are the properties of the event object?
1. target: the target of the event( the most specific element interacted with) 2. type: the of event that was fired 3. cancelable: when you can cancel the default behavior of the element IE 5-8 1. srcElement 2. type 3. Not supported
syntax for using event listeners in IE8 or earlier
<form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" onBlur="checkUsername()"> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> var elUsername = document.getElementById('username'); var elMsg = document.getElementById('feedback'); function checkUsername(minLength){ if(elUsername.value.length < minLength){ elMsg.textContent = 'Username must be ' + minLength + 'characters or more'; }else{ elMsg.innerHTML = ''; } } if(elUsername.addEventListener){ elUsername.addEventListener('blur',function(){ checkUsername(5); },false); }else{ elUsername.attachEvent('onblur',function(){ checkUsername(5); }); }
syntax for Event Listeners
<form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" onBlur="checkUsername()"> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> function checkUsername(){ var elMsg = document.getElementById('feedback'); if(this.value.length < 5){ elMsg.textContent = 'Username must be 5 characters or more'; }else{ elMsg.textContent = ''; } } var elUsername = document.getElementById('username'); elUsername.addEventListener('blur',checkUsername,false);
syntax for HTML event handlers (should not be used)
<form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" onBlur="checkUsername()"> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> function checkUsername(){ var elMsg = document.getElementById('feedback'); if(this.value.length < 5){ elMsg.textContent = 'Username must be 5 characters or more'; }else{ elMsg.textContent = ''; } } var elUsername = document.getElementById('username'); elUsername.onblur = checkUsername; </script>
syntax for DOM event handlers
<form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username"> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> function checkUsername(){ var elMsg = document.getElementById('feedback'); var elUsername = document.getElementById('username'); if(elUsername.value.length < 5){ elMsg.textContent = 'Username must be 5 characters or more'; }else{ elMsg.textContent = '' } } var elUsername = document.getElementById('username'); elUsername.onblur = checkUsername;
syntax for event listeners/ handlers with the event object
<form method="post" action="http://www.example.org/register"> <label for="username">Create a username:</label> <input type="text" id="username"><div id="feedback"></div> <label for="password">Create a password:</label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> function checkLength(e, minLength){ var el, elMsg; if (!e){ e = window.event; } el = e.target || e.srcElement; elMsg = el.nextSibling; if(el.value.length < minLength){ elMsg.innerHTML = 'Username must be ' + minLength + ' characters or more'; }else{ elMsg.innerHTML = ''; } } var elUsername = document.getElementById('username'); if(elUsername.addEventListener) { elUsername.addEventListener('blur', function(e){ checkLength(e, 5); }, false); }else{ elUsername.attachEvent('onblur', function(e){ checkLength(e, 5); }); } </script>
syntax for using parameters with event handlers and listeners
<h1>Parameters With Event Listeners</h1> <form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username"> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password"> <input type="submit" value="Sign up!"> </form> <script> var elUsername = document.getElementById('username'); var elMsg = document.getElementById('feedback'); function checkUsername(minLength){ if (elUsername.value.length < minLength){ elMsg.textContent = 'Username must be ' + minLength + ' characters or more'; }else{ elMsg.innerHTML = ''; } } elUsername.addEventListener('blur', function(){ checkUsername(5); }, false);
syntax for using event delegation
<ul id="shoppingList"> <li class="complete"><a href="itemDone.php?id=1"><em>fresh</em> figs</a></li> <li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li> <li class="complete"><a href="itemDone.php?id=3">honey</a></li> <li class="complete"><a href="itemDone.php?id=4">balsamic vinegar</a></li> </ul> <script> function getTarget(e){ if(!e){ e = window.event; } return e.target || e.srcElement; } function itemDone(e){ var target, elParent, elGrandparent; target = getTarget(e); elParent = target.parentNode; elGrandparent = target.parentNode.parentNode; elGrandparent.removeChild(elParent); if (e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } var el = document.getElementById('shoppingList'); if (el.addEventListener){ el.addEventListener('click', function(e){ itemDone(e); }, false); }else{ el.attachEvent('onclick', function(e){ itemDone(e); }); }
what is an event occurrence described as ?
an event having fired or been raised
what can be done to keep event handlers from responding to every single child element?
attach an event handler/ listener on the containing element and using the event objects properties to see which of the children the event happened on
how would you check to see if the browser supported the addEventListeners() method?
by using a conditional if...else statement to check if the method is valid in the browser version
how do you pass arguments to a function called by an event handler or listener?
by wrapping the function call in an anonymous function
what can JavaScript event listeners/handlers be bound to?
containing <li>, <ul><body><html> tags as well and the document object and the window object
what is the IE 8 or earlier equivalent to *stopPropagation()*method?
the *cancelBubble* property which can be set to true. You use a conditional statement to check if the *stopPropagation()*method* is valid and if not run fallback code
what is the IE 8 or earlier equivalent to *preventDefault()* method?
the *returnValue* property which can be set to false. You use a conditional statement to check if the *preventDefault()* method is valid and if not run fallback code
since the addEventListener() method was not supported in IE 5-8 what was used to make event listeners work?
the attachEvent() method that is exclusive to Internet Explorer
what are events?
the browser's way of indicating when something has happened: page finished loading, button has been clicked
what is event bubbling?
the default type of event flow where the event flows outward from the most specific node to the least specific one
once you have the reference to the event object via a child of the window object what can be accessed from there?
the event objects properties and methods var target = e.target || e.srcElement;
what is binding?
the process of stating events you are waiting to happen and which elements should the event happen to
when specifying the name of the event using Event Listeners what can you omit?
the word *on*
when using event handlers what should you add before the event name
the word *on* *onmouseover*, *onclick*, *onfocus*
how many arguments does the addEventListener() method take?
three 1. to listen for the event 2. the code to run when event fires 3. a Boolean indicating how events flow usually false
when a function is called what does the parenthesis tell the JavaScript interpreter to do?
to execute the function immediately. to make it fire only when triggered by an event leave off the parenthesis function checkUsername(){ } elUsername.onblur = checkUsername;
what can you use *Event Delegation* for ?
to monitor for events that happen on all of the children of an element
what is the alternative to writing the IE 8 or earlier fallback code?
to write your own helper function that creates the proper event handlers
when using event listeners, how does the final parameter effect event flow?
true = capturing phase false = bubbling phase(default because capturing was not available in IE 8 or earlier)
how do you remove an event listener?
using the *removeEventListener()* method with the same 3 parameters as addEventListener()
