JavaScript(10):動作(HTML)、構造(CSS)、スタイル(JS)が分離されたページ

1.イベントをバインドする2つの方法
(1)ダイレクトラベルバインド

(2)まずDOMオブジェクトを取得し、次にバインドする

document.getElementById("i1").onclick
documnet.getElementById("i2").onfocus

以下に、第2のバインド方式による動作、構造、スタイルの分離を実現するページを示す.

    
    
    


    

    
        var butt = document.getElementById("separate");
        butt.onclick = function () {
            console.log("    ！")
        }
//        butt.onclick = console.log("      ？");
//               ，                "      ？"          ，        ，        
    

    2.バインディングイベントをマウスで監視
使い方はonclickと変わらないが、同じように1.で説明している各メニュー項目からアクセスしてください.

onmouseover         //                 
onmouseout          //            

では、以下に簡単なコード例を示します.

    
    


    
          ？！

    
        function stay() {            //         
            console.log("       ");
        }
        var p_tag = document.getElementById("I1");
        p_tag.onmouseout = function () {    //         ，               
            console.log("    ");
        }
    

    3.第3の非常に規則的なバインドイベント方式
この方式はイベントリスナーで実現する必要がある

addEventListener            //            

具体的なコード例を次に示します.

    
    


    
       

    
        var third = document.getElementsByTagName("p");
        //     third     <p>  ，           ！
        third[0].addEventListener("click",function () {
            third[0].style.backgroundColor = "red";
//            this.style.backgroundColor = "red";    this     ，       
        },false)
    

    4.this概念の導入
this、現在のトリガイベントへのラベル
(1)thisを用いた第1のバインディング方式(従来1)

    function onclick(self){
        //self           
    }

(2)thisを用いた第1のバインディング方式(従来2)

    document.getElementById("i1").onclick = function(){
        //this          
    }

では、以下に、完了したサンプルの詳細なサンプルコードを示します.

    
    


    

    
        var tr_list = document.getElementsByTagName("tr");
        console.log(tr_list);
        for (var i=0;i<tr_list.length;i++) {
            tr_list[i].onmouseover = function () {
                this.style.backgroundColor="blue";
//                     this，    tr_list[i]！  JS            ，       i       2，
//                 ， this           。
            }
            tr_list[i].onmouseout = function () {
                this.style.backgroundColor="";  //             ，                  ！！
            }
        }
    

(3)thisを用いた最初のバインド方式(非常規3)
参照3.で説明している各メニュー項目からアクセスしてください.