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. nginx是一个反向代理的软件

    nginx只是一个反向代理的软件,和语言无关,理论上支持任何Web平台,当然http://Asp.net也不例外,http://51aspx.com就是http://Asp.net开发的,前端暴漏的是 ...

  2. 记一次Nginx 400错误

      在一个非CDN的域名下有一个页面,需要请求CDN域名下的资源.所以在CDN的那台源站的Nginx上设置了 add_header 'Access-Control-Allow-Headers' 'X- ...

  3. Maven Learning - Direct Dependencies & Transitive Dependencies

    Dependencies declared in your project's pom.xml file often have their own dependencies. The main dep ...

  4. 修改maven一更新jre就变成1.5版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  5. 怎么删除github上的仓库

    1.到你的个人中心.点击你的个人账号.下图的红色部分 2.点击repositories(仓库),选择你要删除的项目 3.code这一行导航栏 最后的一个. setting 4.下拉页面到最下面 Del ...

  6. FindProcDLL::FindProc 和 KillProcDLL::KillProc，必须使用WPF x86编译出来的程序

    如果是 WPF 编写的exe,想用NSIS打包. 脚本里面要注意了,如果使用了 FindProcDLL::FindProc 和 KillProcDLL::KillProc, 那么WPF 的编译选项必须 ...

  7. 使用SQL Server 2014 In-Memory 内存数据库时需要注意的地方

    转载: http://www.infoq.com/cn/articles/sql-server-2014-memory-database http://www.cnblogs.com/Amaranth ...

  8. js多线程?

    http://www.cnblogs.com/o--ok/archive/2012/11/04/JS.html http://blog.csdn.net/nx8823520/article/detai ...

  9. C_中使用SendMessage

    SendMessage是一个在user32.dll中声明的API函数,在C#中导入如下: using System.Runtime.InteropServices; [DllImport(" ...

  10. C primer plus 练习题 第七章

    1. #include <stdio.h> #define SPACE ' ' #define NEWLINE '\n' int main() { int spaces,newlines, ...