關於javascript的事件綁定

如果有下面一段html代碼

    

 

就不用css美化瞭,希望可以點擊其中li之一來調控p整體的樣式,怎麼做?

問題的核心就是要知道鼠標點擊的哪個li, 我們可以給每一個

  • 都加一個id, 再用js代碼根據id的種類來判斷點擊的是哪一個
  • ,就像下面

 

//HTML
    

 

//JAVASCRIPT
    document.getElementById("na").onclick(function(){
        .....
    });
    document.getElementById("nb").onclick(function(){
        .....
    });
    .......

但這也太煩瞭吧,而且id也太多瞭吧…………

好吧,來簡單的方法瞭

事件委托

利用javascript的事件冒泡, 把事件的綁定移至它們的父級甚至祖父級元素上,這樣隻用綁定一次事件就夠瞭!!!

//HTML
    

 

//JAVASCRIPT
    var wrap = document.getElementById("wrap"),
        DIV = wrap.getElementByTagName("li");

    wrap.onclick = function (ev) {
        var ev = ev || window.event,
            target = ev.target || ev.srcElement; 
    // `||`後的兩個是為瞭兼容ie,現在請默默詛咒IE一秒鐘
        for(var i = 0, l = DIV.length; i

OK!

發佈留言