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>




相关文章推荐

jQuery ready函数实现原理

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

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

delegate与live的实现

javascript 原生实现 jquery live/delegate

原理:都是利事件冒泡实现事件委派    live方法是固定把事件都绑定在了document上,而delegate 把事件绑定了提供的父元素上    delegate减少了冒泡次数,效率会更...

jQuery live() 实现方法

前几天研究jquery live()的实现方式,网上看了下资料,大体就是给父级绑定事件 然后通过事件冒泡 判断event.target来实现,于是就写了个例子. .box1 ...

jQuery中bind,live与one方法解析

.bind(eventType[, evnetData], Handler(eventObject))   bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 ...

jQuery的三种bind/One/Live/On事件绑定使用方法

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从...

jQuery1.9+去除live()后的替代

其实 live() 方法的替代方式已经写入《jQuery性能优化》这篇文章,但是我还是想把它单独写出来:  live() 是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM...

jQuery中的.bind()、.live()和.delegate()之间区别分析(转)

转自:http://www.jb51.net/article/27309.htm jQuery中的.bind()、.live()和.delegate()之间区别分析,学习jquery的朋友可...

jQuery中的bind()、live()的区别与使用

原文地址:http://www.cnblogs.com/mrjungle-home/p/jungle_chang.html 使用jquery有一段时间了,刚开始看别人的源代码的时候对事件的绑定方法...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery live()函数原理及实现
举报原因:
原因补充:

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