<!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. org.json.JSONObject and no properties discovered 错误解决

    自己在搭建SSM框架的时候(Spring + spring mvc + mybatis)报错内容如下: No serializer found for class org.json.JSONObjec ...

  2. 斐波那契数列(python实现）

    描述 一个斐波那契序列,F(0) = 0, F(1) = 1, F(n) = F(n-1) + F(n-2) (n>=2),根据n的值,计算斐波那契数F(n),其中0≤n≤1000. 输入 输入 ...

  3. 扩展gcd codevs 1200 同余方程

    codevs 1200 同余方程 2012年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 求关 ...

  4. Apache -- XAMPP Apache 无法启动原因及解决方法

    XAMPP Apache 无法启动原因1(缺少VC运行库): 这个就是我遇到的问题原因,下载安装的XAMPP版本是xampp-win32-1.7.7-VC9,而现有的Windows XP系统又没有安装 ...

  5. leetcode644. Maximum Average Subarray II

    leetcode644. Maximum Average Subarray II 题意: 给定由n个整数组成的数组,找到长度大于或等于k的连续子阵列,其具有最大平均值.您需要输出最大平均值. 思路: ...

  6. Backbone.js 的最佳应用场景有哪些？#zhihu#

    这段时间,想再次了解下backbone js的相关知识,就把一些认为不错的拿过来了: 新版的有道笔记 Web 版(http://note.youdao.com)也使用了 Backbone.就像其他答案 ...

  7. HashSet,TreeSet和LinkedHashSet

    Set接口 Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false. Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就是说,只要两个对象用 ...

  8. BFC与hasLayout

    BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...

  9. TRF7970A IC Communication Interface

    General Introduction The communication interface to the reader can be configured in two ways: with a ...

  10. android 水纹上涨与水滴滴下效果

    这两天项目比较紧,本来打算完成以后再写博客的,今天终于实现了一个炫的功能,怀着激动的心情,趁热打铁,把项目经验记录一下,效果图如下:  对功能的几点说明: 1.圆形边框旋转 2.水纹上涨 3.水滴滴下 ...