jQuery中的delegate與live實現方式簡析 – JAVA編程語言程序開發技術文章

delegate和live方法是jQuery在1.4版本中新增的方法。他的作用是事件監聽,但是可以對jQuery對象中新增的DOM對象也作用:


<script>
    $(“body”).delegate(“p”, “click”, function(){
      $(this).after(“<p>Another paragraph!</p>”);
    });
</script>
上面的這個demo運行效果就是點擊一個段落P標簽將在p標簽後面添加一個p標簽,對於新增的p標簽同樣可以點擊新增一個p標簽,新增的標簽不需要監聽其click事件。live也同理:



    $(“p”).live(“click”, function(){
      $(this).after(“<p>Another paragraph!</p>”);
    });
這個是怎麼實現的瞭?我自己嘗試瞭一把:首先必須瞭解事件的冒泡機制。下面的例子將在按鈕 和其容器上同時監聽click事件,根據冒泡的做法,將先觸發按鈕的click事件,然後觸發容器p的click事件。


window.onload = function(){
            function handle(e){
                //獲取event對象
                //標準DOM方法事件處理函數第一個參數是event對象
                //IE可以使用全局變量window.event
                var evt = window.event?window.event:e;


                //獲取觸發事件的原始事件源
                //標準DOM方法是用target獲取當前事件源
                //IE使用evt.srcElement獲取事件源
                var target = evt.target||evt.srcElement;


                //獲取當前正在處理的事件源
                //標準DOM方法是用currentTarget獲取當前事件源
                //IE中的this指向當前處理的事件源
                var currentTarget= e?e.currentTarget:this;


                //問題:在IE 9下  window.event 與 e 不同 evt沒有currentTarget屬性,e才有currentTarget屬性(視為標準瀏覽器做法??)
                alert(“src id:”+target.id+”
curent target id :”+currentTarget.id);


               
            }
            document.getElementById(“btn”).onclick=handle;
            document.getElementById(“c”).onclick= handle;
           
        }<p id=”c” class=””>
    <input type=”button” id=”btn” name=”” value=”button”  />
</p>
問題在於處理容器c的click事件是由冒泡觸發的。需要找到真正觸發事件的事件源按鈕btn。標準瀏覽器的event提供瞭currentTarget屬性獲取原始事件源。否標準瀏覽器IE6/7/8可以直接使用this訪問。這樣p的click事件中可以獲取到真正觸發事件的事件源。


//ps:上面的代碼中有個發現:在調試的時候發現IE 9中的e 和全局變量window.event有區別,IE 9的e的設置完全是按照標準瀏覽器來的。所以e也提供瞭currentTarget屬性。下面是我調試時候的發現:


 


其實隻要能獲取到冒泡的原始事件源,對於新增的元素,我們通過監聽其父容器事件,然後根據原始事件是否是新增元素,就可以觸發新增元素的事件。這就是所謂的“代理(delegate)”,就是通過容器(未必是父容器)的事件監聽代理新元素的事件。下面用一個超鏈接新增一個按鈕並且在不監聽其事件情況下通過事件冒泡捕獲其事件。


window.onload = function(){
            function handle(e){
                //獲取event對象
                //標準DOM方法事件處理函數第一個參數是event對象
                //IE可以使用全局變量window.event
                var evt = window.event?window.event:e;


                //獲取觸發事件的原始事件源
                //標準DOM方法是用target獲取當前事件源
                //IE使用evt.srcElement獲取事件源
                var target = evt.target||evt.srcElement;


                //獲取當前正在處理的事件源
                //標準DOM方法是用currentTarget獲取當前事件源
                //IE中的this指向當前處理的事件源
                var currentTarget= e?e.currentTarget:this;


                //問題:在IE 9下  window.event 與 e 不同 evt沒有currentTarget屬性,e才有currentTarget屬性(視為標準瀏覽器做法??)
                alert(“src id:”+target.id+”
curent target id :”+currentTarget.id);


                if(target.id==”newbutton”){
                    alert(“觸發新增元素的delegate方法”);
                }
            }
            document.getElementById(“btn”).onclick=handle;
            document.getElementById(“c”).onclick= handle;



            document.getElementById(“btnadd”).onclick=function(){
                var btn = document.createElement(“input”);
                btn.setAttribute(“value”,”點擊我試試”);
                btn.setAttribute(“type”,”button”);
                btn.setAttribute(“id”,”newbutton”);
                //沒有監聽新按

發佈留言