歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery live()函數原理及實現

實現原理:
其實就是將事件綁定到父節點,由於事件冒泡,所有事件最終會冒泡到document節點
當有事件觸發時,則判斷事件類型和觸發事件的元素是否一致,如果相同則執行函數

<!doctype html>
<html>
    <head>
        <title>jquery live()函數原理及實現</title>
        <style type="text/css">
            table{
                border-collapse:collapse;
                border-spacing:0;
            }
            td{
                border:1px solid #cdcdcd;
            }
        </style>
        <script type="text/javascript">
            function live(target, type, fn){    //元素類型,事件類型,執行函數
                document.onclick = function(event){
                    var e = event ? event : window.event;
                    addRow();
                    if(e.type == type && e.target.tagName.toLocaleLowerCase() == target){
                        fn();    //如果元素類型和事件類型同時匹配,則執行函數
                    }
                }
            }
            function addRow(){
                var x=document.getElementById("tb").insertRow(0);
                var y=x.insertCell(0);
                var z=x.insertCell(1);
                y.innerHTML="NEW CELL1";
                z.innerHTML="NEW CELL2";
            }
           
            //實例:將所有的td(包括後續js添加的)綁定click事件
            live("td", "click", function(){
                alert("live");
            });
        </script>
    </head>
    <body>
        <table id="tb">
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
        </table>
    </body>
</html>

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved