<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div id="container">

    <input type="button" id="btn" class="listener" value="button"  />

</div>

<a href="###" id="btnadd" class="listener">添加一个按钮</a>

</body>

</html>

<script>

window.onload = function(){

    /**

    @para parentId 包裹容器的id

    @para selector 容器内元素的选择器，支持id和className

    @para fn 元素上要执行的函数

    */

    function delegate(parent, eventType, selector, fn)

    {

        //参数处理

        if(typeof parent === 'string')

        {

            var parent = document.getElementById(parent);

            !parent && alert('parent not found');

        }

        if(typeof selector !== 'string')

        {

            alert('selector is not string');

        }

        if(typeof fn !== 'function')

        {

             alert('fn is not 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才有currentTarg

            alert("src id==="+target.id+"\n\ncurent target id=="+currentTarget.id);

            if(target.id === selector || target.className.indexOf(selector) != -1){

                fn.call(target);

            }

        }

        parent[eventType]=handle;

    }

    delegate('container', 'onclick', 'listener', function(){

        alert(this);

    });

    //新增一个元素

    document.getElementById("btnadd").onclick=function(){

        var btn = document.createElement("input");

        btn.setAttribute("value","点击我试试");

        btn.setAttribute("type","button");

        btn.setAttribute("id","newbutton");

        btn.className =  'class="listener"';

        //没有监听新按钮的onclick事件

        document.getElementById("container").appendChild(btn);

    }

}

</script>

原理：都是利事件冒泡实现事件委派

　　　live方法是固定把事件都绑定在了document上，而delegate 把事件绑定了提供的父元素上

　　　delegate减少了冒泡次数，效率会更高些

javascript 原生实现 jquery live/delegate的更多相关文章

  1. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  2. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  3. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  4. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

  5. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  6. jQuery的 delegate问题

    习惯了bind,用惯了live,就不习惯delegate了呀有木有... 支持为动态生成的标签元素绑定事件也许就live和delegate了吧,不过新版本已经不支持live了,只有delegate d ...

  7. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  8. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  9. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

随机推荐

  1. 【BZOJ-2734】集合选数 状压DP （思路题）

    2734: [HNOI2012]集合选数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1070  Solved: 623[Submit][Statu ...

  2. 一次经典的tcp三次握手

    TCP报头 在三次握手中使用的字段: 32位序列号 seq:表示的是本次报文发送的数据的第一个字节的序号. 32位确认号:ack  表示期望下一次应该接受到的报文的第一个字节的序号,若ack = N则 ...

  3. mui 页面滚动解决方案

    默认情况下mui 页面不能滚动,以下为解决方案: 1. mui('.mui-scroll-wrapper').scroll({  deceleration: 0.0005 //flick 减速系数,系 ...

  4. OOW 2015 MYSQL

    https://events.rainfocus.com/oow15/catalog/oracle.jsp?search.event=openworldEvent&search.mysql=d ...

  5. .NET Versioning and Multi-Targeting - .NET 4.5 is an in-place upgrade to .NET 4.0

    Say what you will about the past ridiculousness of .NET Framework versioning, since the confusion of ...

  6. java自动识别上传的apk版本号

    import java.util.List; public class ApkInfo { private String versionCode; private String versionName ...

  7. 【mysql】mysql查询 A表B表 1对多 统计A表对应B表中如果有对应，则返回true否则false作为A表查询结果返回

    A表:goods_type B表:brand_config A:B = 1:N 一种商品类型 对应多条 品牌配置 ======================================== 需求 ...

  8. Appium+python自动化14-查看webview上元素（DevTools）

    前言 app上webview的页面实际上是启用的chrome浏览器的内核加载的,如何把手机的网页加载到电脑上,电脑的chrome浏览器上有个开发模式DevTools,是可以方便调试的. 一.环境准备 ...

  9. 优化png图片的历程

    一.使用yslow一个tool  找到一个叫做smush的工具,点击就可以进入工具的页面. 然后你就能够压缩,下载压缩后的图片. 可是终于我还是没有选择这个方案.由于压缩的图片大小还是太大了,我认为还 ...

  10. Delphi DBGrid图显用法

    procedure TForm10.DBGrid1DrawColumnCell(Sender: TObject; const Rect: TRect;DataCol: Integer; Column: ...