js事件委托也叫事件代理，实际上事件委托就是通过事件冒泡实现的，所谓的事件就是onclick，onmouseover，ondown等等，那么委托呢？委托就是指本来这个事是要你自己做的，但是你却让别人帮你完成这个事，这就叫事件委托。

　　那么为什么需要事件委托？我们先看一段代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    </style>

</head>

<body>

    <ul id="ul">

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

<script>

var ul = document.getElementById("ul");

var li = ul.getElementsByTagName("li");

for(var i=0;i<li.length;i++){

    li[i].onmouseover = function(){

        this.style.backgroundColor = "red";

    }

    li[i].onmouseout = function(){

        this.style.backgroundColor = "";

    }

}

</script>

</body>

</html>

出现的问题1、我们现在的做法是给最具体的元素添加onmouseover事件，这样的话，我们有多少个元素就要循环绑定多少次，严重消耗性能。

如果你这还不觉得没有什么事的话，那么再看一个问题。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    </style>

</head>

<body>

    <button id="btn">添加</button>

    <ul id="ul">

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

<script>

var ul = document.getElementById("ul");

var li = ul.getElementsByTagName("li");

for(var i=0;i<li.length;i++){

    li[i].onmouseover = function(){

        this.style.backgroundColor = "red";

    }

    li[i].onmouseout = function(){

        this.style.backgroundColor = "";

    }

}

var btn = document.getElementById("btn");

btn.onclick = function(){

    var createLi = document.createElement("li");

    createLi.innerHTML = "我是新添加的li";

    ul.appendChild(createLi);

}

</script>

</body>

</html>

　　发现没有？我们后面添加的li却没有onmouseover事件，因为我们在创建这些li的时候，我们在创建这些元素的时候已经for循环完了，后面并没有给后面创建的li添加事件，但是有很多时候我们确实需要在后来添加的元素也需要同样的事件，那这显然有些麻烦，但是我们用事件委托就好办多了。

通过事件委托实现给每个li添加onmouseover事件，其实我更细喜欢说是通过事件冒泡。

var ul = document.getElementById("ul");

var li = ul.getElementsByTagName("li");

ul.onmouseover = function(event){

    // 兼容Ie

    var event = event || window.event;

    // 获取最具体的元素

    var target = event.srcElement || event.target;

    // 判断这个元素是不是ul，如果是的话就不给它添加背景，需要我们只是需要给li添加

    if(target.nodeName.toLowerCase()!=="ul"){

        target.style.backgroundColor = "red";

    }

}

ul.onmouseout = function(event){

    var event = event || window.event;

    var target = event.srcElement || event.target;

    if(target.nodeName.toLowerCase()!=="ul"){

        target.style.backgroundColor = "";

    }

}

var btn = document.getElementById("btn");

btn.onclick = function(){

    var createLi = document.createElement("li");

    createLi.innerHTML = "我是新添加的li";

    ul.appendChild(createLi);

}

　　ok，后添加的元素也会有我们添加的事件。如果你没有看懂这段代码，我觉得你应该是困在event这个地方，建议你还是把基础学好了在来看。我只是讲我每天学到的东西，不可能一直去讲基础的，还请见谅。

JS事件委托的原理和应用的更多相关文章

  1. js事件委托及其原理

    1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这 ...

  2. js的事件的三个阶段,事件委托的原理

    DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流); 事件流: IE:IE事件流是事件冒泡流  Netscape事件流是事件捕获流 IE事件流 叫做事件冒泡 ...

  3. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  4. js事件委托或事件代理

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  5. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  6. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  7. JS事件委托（代理）学习笔记

    在开始之前我们先来熟悉一下HTML DOM addEventListener()方法,该方法用于向指定元素添加事件句柄.语法说明如下图所示: 主要想强调一下第三个参数useCapture,默认值为fa ...

  8. JS事件委托或者事件代理原理以及实现

    事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...

  9. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

随机推荐

  1. Python核心编程（切片索引的更多内容）

    # coding=utf8 s = 'abcde' i = -1 for i in range(-1, -len(s), -1): print(s[:i]) # 结果 ''' abcd abc ab ...

  2. hdu1875 畅通工程再续 最小生成树并查集解决---kruskal

    http://acm.hdu.edu.cn/showproblem.php?pid=1875 New~ 欢迎“热爱编程”的高考少年——报考杭州电子科技大学计算机学院关于2015年杭电ACM暑期集训队的 ...

  3. table表格宽带研究（附带：table表格为什么设置td宽度无效）

    情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一 ...

  4. 磁盘阵列RAID原理、种类及性能优缺点对比

    磁盘阵列(Redundant Arrays of Independent Disks,RAID) 1. 存储的数据一定分片: 2. 分基于软件的软RAID(如mdadm)和基于硬件的硬RAID(如RA ...

  5. 那些在学习iOS开发前就应该知道的事（part 2）

    英文原文:Things I wish I had known before starting iOS development—Part 2 http://www.cocoachina.com/ios/ ...

  6. Android——程序移植 相关知识总结贴

    android 移植笔记有感 http://www.apkbus.com/android-11842-1-1.html   Android振动器系统结构和移植和调试 http://www.apkbus ...

  7. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  8. SecureCRT的快捷键

    快捷键,有时比笨拙的方式,要效率高很多,近期经常和Linux打交道,用到SecureCRT,这里就从网上找到部分快捷方式,作为日后查看,以防经常查找. Alt + Enter -- 全屏Alt + B ...

  9. mssql2012以后新增的offset分页，看起来爽死了！！！

              有没有办法让那时间显示精确到毫秒级呢!!!         2016年12月01日更新 正式用到项目中的时候才发现大坑,那个排序字段必须形成唯一 ,要不然就分页失败的        ...

  10. 统计Codec RAM和ROM方法

    有二种方法,你试一下这个也是我2010-03-29工作日志      2010-03-29: 1) How to accurately get the program memory/Data RAM/ ...