<!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. Map按照数值进行排序

    public static Map<String, Integer> sortMapByValue(Map<String, Integer> oriMap) { if (ori ...

  2. 检测使用内存memory_get_usage，执行时间microtime

    最近经常用一些扩展,适当比较所占内存,还有一些扩展执行时间长,检测一下每步的执行时间,可以加以修正调整一下源码 查看运行时间 microtime() #返回当前 Unix 时间戳和微秒数. echo ...

  3. Codeforces Round #299 (Div. 2) A. Tavas and Nafas 水题

    A. Tavas and Nafas Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/535/pr ...

  4. PAT甲级1013. Battle Over Cities

    PAT甲级1013. Battle Over Cities 题意: 将所有城市连接起来的公路在战争中是非常重要的.如果一个城市被敌人占领,所有从这个城市的高速公路都是关闭的.我们必须立即知道,如果我们 ...

  5. POJ 1293 - Duty Free Shop 01背包记录所选物品

    裸的01背包.dp[x]只要是bool型记录当前空间是否可用.. 而为了找到用了哪些物品..dp[x]设置为int型..进行记录.. Program: #include<iostream> ...

  6. 【cocos2d-x制作别踩白块儿】第九期：游戏计时功能(附源代码)

    游戏没有计时,不是坑爹吗? 这一期,我们将来加入游戏计时功能. 1. 定义变量和函数 我们先在HelloWorldScene.h中定义几个变量和函数 long startTime; bool time ...

  7. 【资料】wod旗帜，纹章

    物品 徽章 旗帜 掉落地点 备注 火焰纹章 法师与怪物 火焰魔法.魔法攻防 雄鹰纹章 受诅咒的遗迹 弩系相关 盗贼纹章 捉迷藏 偷袭.匕首.割喉.近攻防 守夜人的纹章 酒馆里平静的一天 钝器.双打.旋 ...

  8. 一个 MVC 框架以 MVVM 之「魂」复活了！

    GitHub: https://github.com/houfeng/mokit Mokit 最初编写于 2012 年,是一个面向移动应用的前端 mvc 框架,v3 版本进行了大量的重构或重写,并尽可 ...

  9. JVM 虚拟机字节码指令表

    把JVM虚拟机字节指令表整理了一下,方便搜索,偶尔复习下 纯手工整理,可能存在一些问题,如果发现请及时告之我会修正 字节码 助记符 指令含义 0x00 nop None 0x01 aconst_nul ...

  10. SRM 212 Div II Level One: YahtzeeScore

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=1692&rd=5858 比较简单. 代码如下: #inc ...