<!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. 3524: [Poi2014]Couriers -- 主席树

    3524: [Poi2014]Couriers Time Limit: 20 Sec  Memory Limit: 256 MB Description 给一个长度为n的序列a.1≤a[i]≤n.m组 ...

  2. Unity随手机

    该文章持续更新! 协程的返回值必需是 IEnumerator 协程的参数不能加关键字 ref 或 out 在函数 Update 和 FixedUpdate 中不能使用 yield 语句,但可以启动协程 ...

  3. BZOJ 4517: [Sdoi2016]排列计数 错排公式

    4517: [Sdoi2016]排列计数 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4517 Description 求有多少种长度为 ...

  4. kali 执行apt-get upgrade后，终端无法打开的解决办法

    今天在kali执行apt-get upgrade命令后,reboot启动,发现进入界面终端无法开启 一波百度,google发现大概应该是语言的配置问题,因为最开始安装kali的时候是选择中文,可能up ...

  5. spring集合类型注入

    spring集合类型注入 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUB ...

  6. C# WebHelper-CookieHelper，CacheHelper，SessionHelper

    常用web操作工具类,记录一下,本文记录的工具类,都要求引用 System.Web 1.CookieHelper /// <summary> /// Cookie工具类 /// </ ...

  7. ubuntn 内核升级到LINUX v4.11.8:

    升级到LINUX v4.11.8: http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.11.8/linux-headers-4.11.8-041108_ ...

  8. Small tips of APP H5 page

    在开发日常落地页的时候,每当碰到一些很酷炫的宣传图用css实现很复杂且耗时的时候,一般采取切图然后将其放在页面中,在这个过程中发现<img/>标签中图片下方会有一行小空白,影响了与后一部分 ...

  9. 使用hadoop实现关联商品统计

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/40184581 近期几天一直在看hadoop相关的书籍,眼下略微有点感觉,自己就仿 ...

  10. u3d移动游戏优化规范

    1.顶点性能一般来说,如果您想在iPhone 3GS或更新的设备上每帧渲染不超过40,000可见点,那么对于一些配备 MBX GPU的旧设备(比如,原始的 iPhone,如 iPhone 3g和 iP ...