Home > Developer > JavaScript
1 Event properties for HTML
Global Event Properties: HTML 4 Adds the ability to trigger an event in the browser, such as starting JavaScript when the user clicks on an element.
A. Window event properties, events triggered for the Window object (applied to <body> tags), commonly used for onload.
B. Form events, events that are triggered by actions within an HTML form (applied to almost all HTML elements, but most commonly in form elements): Commonly used for onblur, onfocus, Onselect, onsubmit.
C. Keybord Events
D.mouse events, events triggered by a mouse or similar user action: commonly used as onclick, onmouseover, onmouseout.
E. Media events, events triggered by media (such as video, image, and audio) (for all HTML elements, but common in media elements such as <audio>, <embed>, , <object> and <video>).
2 event handler function
The structure of the document is mixed with the behavior of the document, for example:
<href= "images/example.jpg" onclick= "showpic (this); return false;" >
The structure of the document is separate from the behavior of the document, for example:
Element.onclick = function() {showpic (whichpic); return false ; }
3 Sharing onload Events
A javascript:<element onload= "script" is executed immediately after the page is loaded, and if you want to execute multiple scripts after the page is loaded? The approach is:
1 function () {2 script1; 3 script2; 4 SCRIPT3; 5 ...... 6 }But this approach is inflexible, and if the scripts that need to be loaded are constantly changing, the code will change, and the better way is:
1 functionAddloadevent (func) () {2 varOldonload =window.onload;3 if(typeofWindow.onload! = "function") {4Window.onload =func;5}Else {6Window.onload =function() {7 oldonload ();8 func;9 }Ten } One}
Is there any other workaround for sharing onload? can refer to this blog post "JS add event attachevent and AddEventListener usage"
4 Creating HTML tags dynamically
A. two traditional approaches
Both the Document.Write method and the innerHTML property are not the methods and properties supported by the standardized DOM, which are all proprietary properties of HTML.
A document.write method makes it easy to insert element tags, especially strings. However, it is contrary to the principle that web design should separate the behavior (script) from the structure (HTML tags).
<!DOCTYPE HTML> <HTML> <Head> <MetaChaset= "Utf-8" /> <title>document.write</title> <Body> <Script> <!--It is convenient to insert element tags, especially strings. But it's the principle of separating behavior (script) and structure (HTML tags) from web design -document.write ("<p>this is inserted by document.write</p>"); </Script> </Body> </Head> </HTML>
innerHTML is ideal for inserting a large piece of HTML content into a Web page, such as:
<DivID= "Testdiv"> </Div>window.onload = function () {var testdiv = document.getElementById ("Testdiv"); testdiv.innerhtml = "<P>This was inserted by<em>InnerHTML</em></P><en>"; }
B More refined Dom Method-get DOM node tree and change Dom node tree
Retrieving nodes (elements):d Ocument.getelementbyid and Element.getelementsbytagname
Create a node (element):d Ocument.createelement,document.createtextnode
Append node (element): Element.appendchild
Insert (before inserting a node into another node):p Arenteelement.insertbefore (newelement, targetelement)
Useful properties: Element.parentnode (get parent node), element.nextsibling (Get sibling node)
The effect of inserting HTML with the innerHTML attribute above is also possible with the DOM method:
1Window.onload =function() {2 varTestdiv = document.getElementById ("Testdiv");3 varPara = document.createelement ("P");4 Testdiv.appendchild (para);5 varContext1 = Doument.createtextnode ("This was inserted by");6 Para.appendchild (CONTEXT1);7 varemphasis = document.createelement ("em");8 Para.appendchild (emphasis);9 varCONTEXT2 = document.createTextNode ("Method of Domcore");Ten Emphasis.appendchild (CONTEXT2); One}
Use the DOM method above to write a function that inserts a node after another node:
1 function InsertAfter (newelement, targetelement) { 2 var parent = targetelement.parentnode;< /span>3 if (Parent.lastchild == Targetelement) { 4 Parent.appendchild ( newelement); 5 } 6 Targetelement.inserbefore ( Newelement, targetelement.nextsibling); 7 8 }Reference:
JavaScripts DOM Programming art by Jerry Keith & Jeffery Sambells
w3cschool:http://www.w3school.com.cn/
JavaScript Learning Notes (iv): Event handlers and dynamically created HTML tags.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
