Details JS event handling functions and dynamic creation of HTML markup method

Details JS event handling functions and dynamic creation of HTML markup method _javascript tips

Last Update:2017-01-18 Source: Internet

Author: User

Tags html form html tags

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1 Event properties for HTML

Global Event Properties: HTML 4 increases the ability to trigger an event in a browser, such as starting JavaScript when a user clicks on an element.

A. Window event properties, the events that are triggered on the Window object (applied to the <body> tag), are commonly used for onload.

B. Form event, an event triggered by an action within an HTML form (applied to almost all HTML elements, but most commonly in a form element): Commonly used for onblur, onfocus, Onselect, onsubmit.

C. Keybord incident

D.mouse event, an event triggered by a mouse or similar user action: commonly used for onclick, onmouseover, onmouseout.

E. Media events, events triggered by media (such as video, images, and audio) (applicable to 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:

<a 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 Shared onload Event

Execute a javascript:<element onload= "script" immediately after the page loads, if you want the page to load and execute multiple scripts? The approach is:

Window.onload = function () {
 script1;
 Script2;
 SCRIPT3;
 ......
 }

But this approach is not resilient, and if the scripts that need to be loaded are constantly changing, then the code has to change, and better yet:

 function Addloadevent (func) () {
 var oldonload = window.onload;
 if (typeof window.onload!= "function") {
  window.onload = func;
 } else {
  window.onload = function () {
   Oldonload ();
   Func
  }}
 }

4 Dynamically Creating HTML tags

A. Two traditional methods

Both the Document.Write method and the innerHTML attribute are not the methods and properties supported by the standardized DOM (the standard of the consortium), they are all proprietary attributes of HTML.

The Document.Write method makes it easy to insert element tags, especially strings. However, it should be contrary to the principle of separating behavior (script) and structure (HTML tags) from web design.

<! DOCTYPE html>

innerHTML is suitable for inserting a large section of HTML content into a Web page, such as:

<div id= "Testdiv" >
 </div>
 window.onload = function () {
 var testdiv = document.getElementById ("Testdiv");
 testdiv.innerhtml = "<p>this is inserted by <em>innerHTML</em></p><en>";
 }

b. More granular dom methods-getting the DOM node tree and changing the 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 one 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 can be implemented using the DOM method:

 Window.onload = function () {
  var testdiv = document.getElementById ("Testdiv");
  var para = document.createelement ("P");
  Testdiv.appendchild (para);
  var context1 = Doument.createtextnode ("This is inserted by");
  Para.appendchild (CONTEXT1);
  var emphasis = document.createelement ("em");
  Para.appendchild (emphasis);
  var context2 = document.createTextNode ("Method of Domcore");
  Emphasis.appendchild (CONTEXT2);
 }

Use the DOM method above to write a function that inserts a node after another node:

function InsertAfter (newelement, targetelement) {
 var parent = Targetelement.parentnode;
 if (Parent.lastchild = = targetelement) {
  parent.appendchild (newelement);
 } else {
  Targetelement.inserbefore (newelement, targetelement.nextsibling);
 }

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More