jquery live()函数原理及实现

原创 2013年12月04日 10:30:47


<!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(targetObject, type, fn){    //元素类型,事件类型,执行函数
                document.onclick = function(event){
                    var e = event ? event : window.event;
                    addRow();
					alert(1);
					//解决浏览器兼容的问题,e.srcElement IE,e.target FF
					var target = e.srcElement || e.target;					
                    if(e.type == type && target.tagName.toLocaleLowerCase() == targetObject){
                        alert(3);
						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>
	
	实现原理:
其实就是将事件绑定到父节点,由于事件冒泡,所有事件最终会冒泡到document节点
当有事件触发时,则判断事件类型和触发事件的元素是否一致,如果相同则执行函数
	<br>
	<br>
	<br>
        <table id="tb">
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
            <tr>
                <td>..........................................</td>
                <td>..........................................</td>
            </tr>
        </table>
    </body>
</html>




jQuery1.9+中删除了live以后的替代方法

根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。   on方法可以接受三个参数:事件名、触发选择器、事件函数。 ...
  • aya19880214
  • aya19880214
  • 2014年10月11日 18:45
  • 59220

jQuery异步框架探究3:jQuery.when方法

(本篇文章针对jQuery1.6.1版本)经过前两篇文章对jQuery异步回调机制的详细分析,关于jQuery如何实现异步回调机制的原理已经非常清楚了--将"回调函数"与"击发动作"两个步骤分开,这样...
  • warhin
  • warhin
  • 2016年03月27日 14:03
  • 1156

jquery ready方法实现原理 内部原理

今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。 先普及一下jquery.ready()和window.o...
  • dyllove98
  • dyllove98
  • 2013年07月03日 21:32
  • 3057

jQuery三种事件绑定方式.bind(),.live(),.delegate()原理对比

.bind(), .live(), 和 .delegate()之间的区别并不明显。但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug。 基础 D...
  • l498948617
  • l498948617
  • 2014年04月24日 14:44
  • 508

jQuery ready函数实现原理

转载自:http://www.cnblogs.com/fullhouse/archive/2012/03/07/2384016.html jQuery是一套跨浏览器的JavaScri...
  • ygzhong000
  • ygzhong000
  • 2016年02月02日 04:02
  • 264

jQuery ready函数实现原理

jQuery是一套跨浏览器的JavaScript函式库,强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的...
  • ebw123
  • ebw123
  • 2013年05月12日 22:12
  • 644

jquery滚动实现原理之一,自制滚动函数实例

jquery滚动实现原理之一,自制滚动函数实例 (2012-03-20 16:23:09) 转载▼     js标签横向滚动的实现的原理有很多种,进行...
  • ft2166826
  • ft2166826
  • 2013年12月09日 16:57
  • 763

jQuery ready函数实现原理

jQuery是一套跨浏览器的JavaScript函式库,强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的...
  • tfnco
  • tfnco
  • 2015年04月03日 15:42
  • 170

jQuery ready函数实现原理

jQuery是一套跨浏览器的JavaScript函式库,强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的...
  • dz45693
  • dz45693
  • 2012年04月28日 23:01
  • 2473

jQuery中的delegate与live实现方式简析

delegate与live的实现
  • qq_34893429
  • qq_34893429
  • 2017年03月03日 21:19
  • 260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery live()函数原理及实现
举报原因:
原因补充:

(最多只允许输入30个字)