<!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. April Fools Day Contest 2016 A. Da Vinci Powers

    A. Da Vinci Powers 题目连接: http://www.codeforces.com/contest/656/problem/A Description The input conta ...

  2. PAT甲级1103. Integer Factorization

    PAT甲级1103. Integer Factorization 题意: 正整数N的K-P分解是将N写入K个正整数的P次幂的和.你应该写一个程序来找到任何正整数N,K和P的N的K-P分解. 输入规格: ...

  3. OpenWrt防火墙配置（极路由）

    说明: 1.极路由使用的是OpenWrt做为操作系统,本身就是一个Linux,包管理使用opkg,只是改了一个界面而已. 2.Linux下的防火墙最终都会归iptables进行管理,OpenWrt的防 ...

  4. Eclipse：The superclass javax.servlet.http.HttpServlet was not found on the Java Build Path

    我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServlet was not found on t ...

  5. 获取音视频文件AVMetadata数据

    获取音视频文件AVMetadata数据 问题来源: http://stackoverflow.com/questions/16318821/extracting-mp3-album-artwork-i ...

  6. slf4j log4j logback log4j2关系详解和相关用法

    来源:slf4j log4j logback关系详解和相关用法https://www.cnblogs.com/Sinte-Beuve/p/5758971.html The Simple Logging ...

  7. sonar使用故障Unable to load component class org.sonar.scanner.report.ActiveRulesPublisher/Unable to load component interface org.sonar.api.batch.rule.ActiveRules: NullPointerException

    nginx后两个sonar负载分担 解决办法 Credit to @teryk-sonarsource-team, just making it an answer: Delete the direc ...

  8. WEB漏洞挖掘技术总结

    漏洞挖掘技术一直是网络攻击者最感兴趣的问题,漏洞挖掘的范围也在随着技术的提升而有所变化.在前期针对缓冲区溢出.格式化字符串.堆溢出.lib库溢出等技术都是针对ELF文件(Linux可执行文件)或者PE ...

  9. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

  10. JSP学习笔记（二）：动作元素

    与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用JSP动作可以动态地插入文件.重用JavaBean组件.把用户重定向到另外的页面.为Java插件 ...