`
caniggia1986
  • 浏览: 151508 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多
http://www.blogjava.net/Hafeyang/archive/2011/04/19/the_implementation_of_jquery_delegate_and_live.html
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+"\ncurent 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");
                //没有监听新按钮的onclick事件
                document.getElementById("c").appendChild(btn);
            }
        }
<div id="c" class="">
    <input type="button" id="btn" name="" value="button"  />
</div>
<a href="###" id="btnadd">添加一个按钮</a>

这个应该是用事件的冒泡特性实现代理的把
分享到:
评论

相关推荐

    jQuery:bind() delegate() live()事件绑定

    在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时,我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择,帮助开发者创建响应式和动态的Web应用...

    jQuery中delegate与on的用法与区别示例介绍

    尽管从jQuery 1.7版本之后,.delegate()方法已经被.on()方法所取代,但在早期的jQuery版本中,这两种方法都广泛被用于实现事件委托机制。下面我将详细介绍这两种方法的用法、区别以及它们各自的适用场景。 首先,...

    jQuery中bind(),live(),delegate

    今天我们将深入探讨jQuery中的事件绑定方法,包括`bind()`, `live()`, `delegate()`,以及后来推出的`on()`方法。这四个方法都是为了帮助开发者更方便地管理页面上的事件,特别是对于动态生成的元素。 1. **bind()*...

    jQuery中 delegate使用的问题

    习惯了bind,用惯了live,就不习惯delegate了呀有木有… 支持为动态生成的标签元素绑定事件也许就live和delegate了吧,不过新版本已经不支持live了,只有delegate delegate真的比较特殊呀,不同于其他事件绑定的风格...

    浅谈jquery中delegate()与live()

    在jQuery中,管理事件的方式经历了多个版本的演变,而delegate()与live()方法就是旧版本中用于处理事件的两种不同方式。在现代jQuery开发中,虽然这两个方法已经被on()方法所取代,但了解它们依然对于理解和维护早期...

    jQuery中delegate()方法的用法详解

    在jQuery库中,`delegate()`方法是一个非常有用的事件处理程序绑定功能,它允许开发者为动态创建的元素或一组元素绑定事件。这个方法尤其适用于那些在DOM加载时并不存在,但在之后通过JavaScript添加到页面中的元素...

    jQuery中delegate()方法用法实例

    主要介绍了jQuery中delegate()方法用法,实例分析了delegate()方法的功能、定义及为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下

    详解jquery事件delegate()的使用方法

    主要详解了jquery事件delegate()的使用方法,delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,感兴趣的小伙伴们可以参考一下

    jquery事件代理方式的区别联系

    本文将深入探讨jQuery中的事件代理方式,包括`live`, `delegate`和`bind`的区别与联系。 ### 事件冒泡与事件代理原理 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件的过程。当一个元素触发事件,该...

    JS delegate与live浅析

    虽然live方法在jQuery 1.9版本中完全被移除,但delegate方法一直被保留,而且它提供了一种更加灵活的方式来实现事件委托。Delegate方法允许我们指定一个父元素,然后为该父元素及其子元素中的符合特定选择器的元素...

    jQuery中delegate和on的用法与区别详细解析

    在jQuery1.7中 .delegate()已被.on()取代。对于早期版本,它仍然使用事件委托的最有效手段。在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)...

    简单的delegate实现

    在提供的`DelegateSample`压缩包中,你应该能找到一个具体的Delegate实现示例,包括定义协议、实现协议、设置Delegate以及处理事件的代码。通过阅读和分析这些代码,你会对Delegate有更深入的理解。记得实践是检验...

    jQuery:delegate中select()不起作用的解决方法(实例讲解)

    在探讨如何解决jQuery的delegate方法中select()事件无效的问题之前,我们先来梳理一下几个关键知识点:jQuery的delegate()方法的用途、select()事件的作用以及setTimeout()在解决事件绑定问题中的独特应用。...

    jQuery中bind,live,delegate与one方法的用法及区别解析

    在jQuery库中,有四种主要的方法用于绑定事件处理程序:`.bind()`, `.live()`, `.delegate()`, 和 `.one()`。这些方法各有特点,适用于不同的场景,下面我们将逐一深入探讨它们的用法和区别。 1. **.bind() 方法** ...

    Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...

Global site tag (gtag.js) - Google Analytics