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. 互信息（Mutual Information）

    本文根据以下参考资料进行整理: 1.维基百科:https://zh.wikipedia.org/wiki/%E4%BA%92%E4%BF%A1%E6%81%AF 2.新浪博客:http://blog. ...

  2. cygintl-8.dll 是cygwin的哪个包？|Windows查看man手册的方法-cygwin

    答案是: 是 Release\gettext\libintl8\libintl8-0.18.1.1-2.tar.bz2 应该是gettext 项目的一部分吧. 下载地址 可以直接从 cygwin的镜像 ...

  3. ubuntu安装gitlab

    #安装所有的依赖包 sudo apt-get install -y build-essential git-core sudo apt-get install -y zlib1g-dev libyam ...

  4. Entity Framework 6.x Code Frist For Oracle 实践与注意点

    Entity Framework 6.x Code Frist For Oracle 实践与注意点 开发环境 Visual Studio.net 2015/2017 Oracle 11g/12c 数据 ...

  5. select选择框内容左右移动添加删除栏（升级）

    先看一下之前的版本(10年前的作品了) 新版增加了拖动事件(双向及本列),双击左右自动移动,修正了算法性能更好: 也更新了如果姓名长度太长显示变形问题

  6. 查看Oracle数据库的用户名和密码

    运行 cmd 按如下输入命令 sqlplus / as sysdba ---------以sys登陆          超级用户(sysdba) alter user 用户名 account unlo ...

  7. 10分钟掌握XML、JSON及其解析

    引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的技术也是浩如烟海,是几千年来人类科技的结晶,单个人穷其一生也未必能掌 ...

  8. [纯干货] MySQL索引背后的数据结构及算法原理

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  9. IE6下的效果

    1. IE6有宽度border实现透明 如果想使得边框颜色透明,在其余浏览器下比较简单,直接使用:border-color:transparent;但在IE6下这个办法不行,可以通过下面的方式实现: ...

  10. 【转载】酷酷的CSS3三角形运用

    转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...