Run, my JavaScript (3)

Source: Internet
Author: User
Tags tag name

JavaScript exception capture1. Exception: An error occurred during execution, causing the program to stop running2. Exception throws: Generates an error message for an exception3. Exception Capturetry{the code block where the exception occurred}catch (err) {Error Information Processing}To give an example:
Try{str = function Demo () {}}catch (err) {alert (err);} Demo ();
Where we str is undefined, the demo () function has no function body, so what error can we catch?Of course we can also use the throw statement to customize an error yourself. DOM1. Introduction: DOM (Document Object model), an API for HTML and XML documents2.DOM depicts any HTML document as a structure with multi-layered nodes that form a hierarchy between nodes, forming a tree structure. 3. The document node is the root node of each document4. The document element is the outermost element of the document, and all other elements in the document are contained within the document element, with only one document element. ,
5.Node We call the class array object, which holds an ordered set of nodes. Use [index] and item (index) methods to access specific values
1. Nodes of the same level will point to the same parent node2. Two nodes between adjacent, can use NextSibling () and previoussibing () to elicit each other3. All nodes have an identical attribute, ownerdouments (), which can point to the document nodeDom manipulating HTML1. When the page is loaded, the browser creates the Document Object model for the page2. Looking for an element: looking for an ID; tag name3. Change the content, InnerHTML4. Changing attributes1. Changing the HTML output streamNote: You cannot use douments.write after the document is loaded, which overwrites the document
<body><button id= "BTN" onclick= "demo ()" > button </button><p id= "pid" >hello</p><script >    Function Demo () {        var btn1 = document.getElementById ("btn");        pid.innerhtml = "World";    } </script></body>
Dom manipulating CSS1. Change CSS style
<style>    #div {        width:100px;        height:100px;        background-color:red;    } </style><body><div id= "div" >    Hello world</div><script>    function demo () {        document.getElementById ("div"). Style.backgroundcolor = "Blue";    } </script><button onclick= "demo ()" >abc</button></body>
DOM Events1.DOMEventListenerHandles can abstract a uniform method into an eventHandles do not overwrite each otherAlign always contains two handles: AddEventListener (adds an event handle to the specified element), removeEventListener (removes the added handle) JavaScript Event Flowdescribes the order in which events are accepted in the page1. Event bubblingnodes that have specific elements to receive and then propagate upward to the least specific elements (from inside to outside, step by Step)2. Event CaptureThe least specific node accepts the event first, and the most specific node should finally receive the event (from outside to inside, step by Step)3. Event HandlingHTML event Handling: Added directly to the HTML structureDOM0-level event handling: Assigns a function to an event handler property, but overrides the ancestor event, which is called by IDDOM2 Level Event handling: AddEventListener (event name, event handler, Boolean) (Ps.true: Event capture, false: event bubbling)IE event handler: attachevent/detachevent
<body><!--HTML event handling--><div>    <button id= "BTN1" onclick= "demo ()" > Buttons </button>    <script>        Function Demo () {            alert ("HTML event Handling");        }    </script></div><!--DOM0-level event handling--><div>    <button id= btn1 > Buttons </button>    <script>        var btn = document.getElementById ("btn1");        Function Demo () {            alert ("DOM0 event Handling");        }        Btn.onclick = demo;    </script></div><!--DOM2-level event handling--><div>    <button id= btn1 > Buttons </button>    <script>        var btn = document.getElementById ("Btn1"). AddEventListener ("click", demo);        Function Demo () {            alert ("DOM2-level event handling");        }    </script></div></body>

IE Event processing here is no longer too much to explain.


Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Run, my JavaScript (3)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.