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>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
        </table>
    </body>
</html>

jQuery 的详细介绍请点这里
jQuery 的下载地址请点这里

推荐阅读:

jQuery完成带复选框的表格行高亮显示

jQuery完成带单选按钮的表格行高亮显示

jQuery 获取json数据[$.getJSON方法]

jQuery去掉字符串起始和结尾的空格

jQuery显示和隐藏div特效demo

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3b297b58b0eb1d0bc6bd82d5e14ec7a5.html