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. iOS开发-xCode代码格式化xAlign

    xCode默认是可以进行代码格式化的,能满足基础开发需求,如果想要个性一些代码对齐方式宏对齐,等号对齐,属性对齐,xAlign就提供了以上三种功能,参考文中效果~ 基础效果 等号对齐: 属性对齐: 宏 ...

  2. PHP类与面向对象（二）

    构造函数和析构函数 构造函数PHP 5 允行开发者在一个类中定义一个方法作为构造函数.具有构造函数的类会在每次创建新对象时先调用此方法,所以非常适合在使用对象之前做一些初始化工作.如果子类中定义了构造 ...

  3. 利用BitLocker和vhdx创建一个有加密的Win10系统

    如果电脑不支持TPM加密BitLocker,就无法对系统盘进行全盘加密. 可以采用一个变通的方法:创建一个vhdx,将这个虚拟磁盘进行BitLocker加密,然后在这个盘里安装操作系统,最后把vhdx ...

  4. VC多线程的用法

    .h 文件 #define WM_TEST    WM_USER + 1 class CTestThread : public CWinThread { DECLARE_DYNCREATE(CTest ...

  5. Arduino单片机使用和开发问题记录

    1.将程序上传到板子时Arduino IDE提示“avrdude: stk500_getsync(): not in sync: resp=0x00” 网上查遇到这个问题的人比较多,有说驱动问题的,有 ...

  6. Meanshift filter实现简单图片的卡通化效果

        利用Meanshift filter和canny边缘检测的效果,可以实现简单的图片的卡通化效果.简单的说,就是用Meanshift filter的结果减去canny算法的结果得到卡通化的效果. ...

  7. 奇怪吸引子---Thomas

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  8. H608B无线路由破解方法

    家里的无线路由送人了,准备重新买,今日一看,竟然自带的猫(ZTE H608B)有wifi天线和4个LAN口,想着是支持路由功能的,那必然就是从软件上做了手脚.搜索该型号发现没人刷openwrt或者to ...

  9. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  10. 解决Maven关于本地jar包的打包处理

    在使用maven进行jar包管理时,通过我们都是通过maven去下载一些jar包,但有些jar在maven上没有,所以就就可能在本地直接手动加入一些需要用到的外部jar包.但如果我们用maven pa ...