DOM 2 & Event Handling
DOM 2 properties <ul><li>innerHTML </li></ul><ul><li>outerHTML </li></ul><ul><li>innerText </li></ul><ul><li>outerText </l...
innerHTML example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br ...
innerText example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br ...
outerHTML example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br ...
outerText example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br ...
Event Binding( 동이다 ) in HTML <ul><li>HTML can bind events with HTML tags or HTML elements </li></ul><ul><li>The binding is...
List of Basic Events Same as above Fires when a element gets focus onFocus < a >, < area >, < button >, < input >, < label...
Example of onBlur and onFocus <ul><li><BODY> </li></ul><ul><li><form> </li></ul><ul><li><input type=&quot;text&quot; id=&q...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
Example of onChange <ul><li><BODY> </li></ul><ul><li><form> </li></ul><ul><li><select  onChange=&quot;alert('value changed...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
Example of onclick and ondblclick <ul><li><BODY> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text1&quot;  ondb...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
Example of onkeypress, onkeyup, onkeydown <ul><li><BODY> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text1&quo...
List of Basic Events onunload – Fires when the element this event is  attached is closed . body >, < frameset > In IE4+ al...
Example of onload and onunload <ul><li><BODY  onLoad=&quot;alert('welcome to my website')&quot;   onunload=&quot;alert('by...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
List of Basic Events *  most display elements*”   means all elements except  < applet > ,  < base > ,  < basefont > ,  < b...
List of Basic Events <form> Fires when the  submit button is clicked onsubmit   <form> Fires when the  reset button is cli...
List of Basic Events Ex: <BODY> <input id=&quot;i1&quot; type=&quot;text&quot;  onSelect=&quot;alert('text selected ')&quo...
Binding Events dynamically <ul><li>You can add or remove events dynamically using JavaScript. </li></ul><ul><li><BODY> </l...
Event Handler Scope <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot;  onclick=&quot;alert(...
Event Handle Scope Cont… <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot;  onclick=“show()...
Event Handle Scope Cont… <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot;  onclick=“show(a...
Upcoming SlideShare
Loading in …5
×

Week7

2,149 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Week7

  1. 1. DOM 2 & Event Handling
  2. 2. DOM 2 properties <ul><li>innerHTML </li></ul><ul><li>outerHTML </li></ul><ul><li>innerText </li></ul><ul><li>outerText </li></ul>
  3. 3. innerHTML example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br /> </li></ul><ul><li><p id=&quot;para1&quot;>This is a <em>test</em> paragraph.</p> </li></ul><ul><li><br /> </li></ul><ul><li></div> </li></ul><ul><li><br /><br /><hr /> </li></ul><ul><li></body> </li></ul><ul><li>var theElement = document.getElementById(&quot;para1&quot;); </li></ul><ul><li>alert(&quot;inner html = &quot; +theElement.innerHTML); </li></ul><ul><li>theElement.innerHTML = “This is a <b>test </b> paragraph” </li></ul>
  4. 4. innerText example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br /> </li></ul><ul><li><p id=&quot;para1&quot;>This is a <em>test</em> paragraph.</p> </li></ul><ul><li><br /> </li></ul><ul><li></div> </li></ul><ul><li><br /><br /><hr /> </li></ul><ul><li></body> </li></ul><ul><li>var theElement = document.getElementById(&quot;para1&quot;); </li></ul><ul><li>alert(“outer HTML = &quot; +theElement.innerText); </li></ul><ul><li>theElement.innerText = “This is a <b>test </b> paragraph” </li></ul>
  5. 5. outerHTML example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br /> </li></ul><ul><li><p id=&quot;para1&quot;>This is a <em>test</em> paragraph.</p> </li></ul><ul><li><br /> </li></ul><ul><li></div> </li></ul><ul><li><br /><br /><hr /> </li></ul><ul><li></body> </li></ul><ul><li>var theElement = document.getElementById(&quot;para1&quot;); </li></ul><ul><li>alert(&quot;inner Text = &quot; +theElement.outerHTML); </li></ul><ul><li>theElement.outerHTML = “<p id=‘newPara’ style=‘background-color:green;’>This is a <em>test</em> paragraph</p>”; </li></ul>
  6. 6. outerText example <ul><li><body> </li></ul><ul><li><div style=&quot;background-color: yellow&quot;> </li></ul><ul><li><br /> </li></ul><ul><li><p id=&quot;para1&quot;>This is a <em>test</em> paragraph.</p> </li></ul><ul><li><br /> </li></ul><ul><li></div> </li></ul><ul><li><br /><br /><hr /> </li></ul><ul><li></body> </li></ul><ul><li>var theElement = document.getElementById(&quot;para1&quot;); </li></ul><ul><li>alert(“outer Text = &quot; +theElement.outerHTML); </li></ul><ul><li>theElement.outerText = “<p id=‘newPara’ style=‘background-color:green;’>This is a <em>test</em> paragraph</p>”; </li></ul>
  7. 7. Event Binding( 동이다 ) in HTML <ul><li>HTML can bind events with HTML tags or HTML elements </li></ul><ul><li>The binding is supported using element attributes </li></ul><ul><li>Ex : </li></ul><ul><li><a href=“ www.w3c.org/dom ” onClick=“alert(‘Going to DOM website’);”> </li></ul><ul><li>Read about W3C Dom</a> </li></ul><ul><li>- Usign onClick attribute, an event is bind with the <a> tag. </li></ul><ul><li>- This event means, when user click on <a> tag, fire the onClick event. </li></ul><ul><li>- Firing onClick event, executes the code inside onClick attribute. </li></ul>
  8. 8. List of Basic Events Same as above Fires when a element gets focus onFocus < a >, < area >, < button >, < input >, < label >, < select >, < textarea > Also < applet >, < area >, < div >, < embed >, < hr >, < img >, < marquee >, < object >, < span >, < table >, < td >, < tr > In IE4+ and N4 also < body > In N4 also < frameset >, < ilayer >, < layer > Fires when an element looses focus onBlur Allowed HTML Elements Event Description Event Attribute
  9. 9. Example of onBlur and onFocus <ul><li><BODY> </li></ul><ul><li><form> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text1&quot; onFocus=&quot;alert('focus on text1')&quot; onBlur=&quot;alert('leaving text1')&quot; > </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text2&quot; onFocus=&quot;alert('focus on text2')&quot; onBlur=&quot;alert('leaving text2')&quot; > </li></ul><ul><li></form> </li></ul><ul><li></BODY> </li></ul>
  10. 10. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when an element is clicked . onClick < input >, < select >, < textarea > Fires when an element looses focus and its value has been changed onChange Allowed HTML Elements Event Description Event Attribute
  11. 11. Example of onChange <ul><li><BODY> </li></ul><ul><li><form> </li></ul><ul><li><select onChange=&quot;alert('value changed')&quot; > </li></ul><ul><li><option value=&quot;a&quot;> a </option> </li></ul><ul><li><option value=&quot;b&quot;> b </option> </li></ul><ul><li><option value=&quot;c&quot;> c </option> </li></ul><ul><li></select> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text2&quot; onChange=&quot;alert('value changed in text2')&quot; > </li></ul><ul><li></form> </li></ul><ul><li></BODY> </li></ul>
  12. 12. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when an element is clicked . onClick Most display elements* In IE4+ also < applet >, < font > Fires when an element has been double clicked ondblclick Allowed HTML Elements Event Description Event Attribute
  13. 13. Example of onclick and ondblclick <ul><li><BODY> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text1&quot; ondblclick=&quot;alert('double click')&quot; > </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text2&quot; onclick=&quot;alert('single click')&quot; > </li></ul><ul><li></BODY> </li></ul>
  14. 14. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when a key is pressed down and then released and focus is on the particular element this event is bind to onkeypress Most display elements* In IE4+ also < applet >, < font > Fires when a key is pressed down and focus is on the particular element this event is bind to onkeydown Allowed HTML Elements Event Description Event Attribute
  15. 15. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when a key is released and focus is on the particular element this event is bind to onkeyup Allowed HTML Elements Event Description Event Attribute
  16. 16. Example of onkeypress, onkeyup, onkeydown <ul><li><BODY> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text1&quot; onkeydown=&quot;alert('key pressed')&quot; > </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text2&quot; onkeyup=&quot;alert('key released')&quot; > </li></ul><ul><li><input type=&quot;text&quot; id=&quot;text3&quot; onkeypress=&quot;alert('key press')&quot; > </li></ul><ul><li></BODY> </li></ul>
  17. 17. List of Basic Events onunload – Fires when the element this event is attached is closed . body >, < frameset > In IE4+ also < applet >, < embed >, < link >, < script >, < style > In N4 also < ilayer >, < layer > In IE4+ and N4 also < img > Fires when the element this event is attached to has finished loading . onload Allowed HTML Elements Event Description Event Attribute
  18. 18. Example of onload and onunload <ul><li><BODY onLoad=&quot;alert('welcome to my website')&quot; onunload=&quot;alert('bye bye')&quot; > </li></ul><ul><li>hi </li></ul><ul><li></BODY> </li></ul>
  19. 19. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when mouse comes on element and then moves onmousemove Most display elements* In IE4+ also < applet >, < font > Fires when mouse moves on the element and mouse button is clicked onmousedown Allowed HTML Elements Event Description Event Attribute
  20. 20. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when mouse moves comes on the element onmouseover Most display elements* In IE4+ also < applet >, < font > Fires when mouse moves out of the element onmouseout Allowed HTML Elements Event Description Event Attribute
  21. 21. List of Basic Events * most display elements*” means all elements except < applet > , < base > , < basefont > , < br > , < font > , < frame > , < frameset > , < head > , < html > , < iframe > , < isindex > , < meta > , < param > , < script > , < style > , and < title > . Most display elements* In IE4+ also < applet >, < font > Fires when mouse moves is on the element and pressed button is released onmouseup Allowed HTML Elements Event Description Event Attribute
  22. 22. List of Basic Events <form> Fires when the submit button is clicked onsubmit <form> Fires when the reset button is clicked onreset Allowed HTML Elements Event Description Event Attribute
  23. 23. List of Basic Events Ex: <BODY> <input id=&quot;i1&quot; type=&quot;text&quot; onSelect=&quot;alert('text selected ')&quot; > </BODY> <input> <textarea> Fires when text is selected using mouse or using keyboard onselect Allowed HTML Elements Event Description Event Attribute
  24. 24. Binding Events dynamically <ul><li>You can add or remove events dynamically using JavaScript. </li></ul><ul><li><BODY> </li></ul><ul><li><form> </li></ul><ul><li><input type=&quot;button&quot; id=&quot;myButton&quot; value=&quot;ClickMe&quot;> </li></ul><ul><li></form> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>bd = document.getElementById(&quot;myButton&quot;); </li></ul><ul><li>bd.onclick =new Function(&quot;alert('button clicked')&quot;); </li></ul><ul><li></script> </li></ul><ul><li></BODY> </li></ul>
  25. 25. Event Handler Scope <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot; onclick=&quot;alert(this.id) &quot; style=&quot;background-color:yellow;&quot;> </li></ul><ul><li>this is my paragraph </li></ul><ul><li><br><br><br><br> </li></ul><ul><li></p> </li></ul><ul><li></BODY> </li></ul><ul><li>In the example abvove, </li></ul><ul><li>- Event handler is scope is within the boundary of <p> tag. </li></ul><ul><li>- If we click outside boundary of <p>, onclick event is not fired. </li></ul>
  26. 26. Event Handle Scope Cont… <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot; onclick=“show() &quot; style=&quot;background-color:yellow;&quot;> </li></ul><ul><li>this is my paragraph </li></ul><ul><li><br><br><br><br> </li></ul><ul><li></p> </li></ul><ul><li></BODY> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>window.name=“my window” </li></ul><ul><li>function show() </li></ul><ul><li>{ </li></ul><ul><li>alert(this.name) </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  27. 27. Event Handle Scope Cont… <ul><li><BODY> </li></ul><ul><li><p id=&quot;myPara&quot; name=&quot;para1&quot; onclick=“show(a) &quot; style=&quot;background-color:yellow;&quot;> </li></ul><ul><li>this is my paragraph </li></ul><ul><li><br><br><br><br> </li></ul><ul><li></p> </li></ul><ul><li></BODY> </li></ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>window.name=“my window” </li></ul><ul><li>function show(var x) </li></ul><ul><li>{ </li></ul><ul><li>alert(x.name) </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>

×