The python JS (common event and binding way)

In the <script> </ script> in
 1-defined function in the labels then onclick = " function name " bind
 2 . Events by binding to the label JS 
    var b2Ele = doucment.getElementById ( " B2 " ) 
    b2Ele.onclick = function () {} 
    
    
common event:
 . 1 .onclick
 2 .onfocus: element receives the focus (typical example: the default is one input box data, when the cursor when the click input box to make the appropriate event, for example, default empty) 
  the onblur: onfocus and contrast, (typical example: when the cursor out of the input box, make the appropriate action, such as to restore the default value of the input box) 
  simple example:
         <! DOCTYPE HTML> 
        <HTML lang = " the CN-ZH " > 
        <head> 
            <Meta-equiv = HTTP "content-Type" Charset = " UTF-. 8 " > 
            <Meta HTTP-equiv = " X-UA-compatible " Content = " IEs = Edge " > 
            <title> the Title </ title> 
        </ head> 
        <body> 

        <INPUT type = " text " the above mentioned id = " I1 " value = " sub Hart " > 
        <Script> 
            // find the label you want to bind events 
            var i1Ele = document.getElementById ( "i1");
            // 1. First Binding get the focus of the event 
            i1Ele.onfocus = function (EV) {
                 // When the input box thing to do after acquiring the focus 
                this.value = "" ; 
            };
             // 2 . Binding lost focus event 
            i1Ele .onblur = function (EV) { 
                this.value = " pair Hart " ; 
            }
         </ Script> 
        </ body> 
        </ HTML> 
. 3 .onchange: behavior when a value of the tag is changed to be performed 
  a simple example : 
        <! DOCTYPE HTML> 
        <HTML lang = " ZH-the CN " >
        <head>
            <meta http-equiv="content-Type" charset="UTF-8">
            <meta http-equiv="x-ua-compatible" content="IE=edge">
            <title>Title</title>
        </head>
        <body>

        <label for="s1">省</label>
        <select id="s1">
            <option value="">-请选择省-</option>
        </select>

        <label for=" S2 " > City </ label> 
        <SELECT ID = " S2 " > 

        </ SELECT> 

        <Script> 
            var Data = {
                 " Beijing " : [ " Changping District " , " Haidian District " , " Chaoyang District " ],
                 " Shanghai " : [ " Pudong " , " Xuhui District " , " Pudong New area " ],
                " Shandong ": [ " Yantai " , " Qingdao " , " Weihai " ] 
            }; 
            var s1Ele = document.getElementById ( " S1 " ); 
            var s2Ele = document.getElementById ( " S2 " );
             //. 1 to get all the provinces. generates a corresponding option in the option s1
             for (var I in Data) { 
                the console.log (I);
                 // 1.1 Create option tag 
                var tmp = document.createElement ( " option ");
                 // 1.2 put option information to save label 
                tmp.innerText = I;
                 // 1.3 put option tag into the created first select a label 
                s1Ele.appendChild (tmp); 
            }

             // When the user selects a after the provinces only thing to do
             // when the value of the first select box changes the action triggered 
            s1Ele.onchange = function (EV) {
                 // 0. select the Option to empty the second frame 
                s2Ele.innerHTML = "" ;
                 // 1 get the user selected provinces. 
                console.log (this.value); 
                var the p- =this.value;
                 // 2 according to user selection province, city data to find the data corresponding province. 
                var cityArray = data [P];
                 //. 3 . through all the city data, added to the second option select box options
                 for (var J in cityArray) { 
                    the console.log (cityArray [J]);
                     // 3.1 generating empty Option 
                    var tmp = document.createElement ( " Option " );
                     // 3.2 to add text Option 
                    tmp.innerText = cityArray [ J];
                     // 3.3 Pass option is added to the generated second select tags 
                    s2Ele.appendChild (tmp);
                }
            }

        </script>
        </body>
        </html>
The python JS (common event and binding way)

Guess you like
