JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果。

好处:
1.提高性能
2.新添加的元素还会有之前的事件
 
 
<</</</</li>
</ul>
 
这样一个HTML结构
  我想要给LI增加一个鼠标点击的效果通常写法
 
window.onload ; i )
      }
   }
}
 
如果事件委托呢,我会把时间委托给ul  就把for 循环直接改
 
oUl.onclick )
}
 
接下来我们想写过一个,给LI加一个鼠标经过的效果 默认我肯定会这样写:
 
window.onload ; i <oLi.length; i++){
      oLi[i].onmouseover = function(){
         this.style.background = "red"
      }

oLi[i].onmouseout = function(){
         this.style.background = ""
      }
   }
}

 
如果我用事件委托的写法:
 
event对象,事件源,无论你操作等你个对象的事件
 
event对象有兼容想
 
 IE  :window.event.srcElement;
标准  : event.target;
 

window.onload = function(){
   var oUl = document.getElementById("ul");
   var oLi = oUl.getElementsByTagName("li")

oUl.onmouseover = function(ev){
       var ev = ev || window.event; //事件
       var target =  ev.targe || ev.srcElement; //事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
       if(ev.target.nodeName.toLocaleLowerCase()=="li"){   // 事件在LI 上面才执行增加背景颜色
          ev.target.style.background = "red"
       }

}
   oUl.onmouseout = function(ev){
       var ev = ev || window.event;
       var target =  ev.targe || ev.srcElement;
       ev.target.style.background = ""
   }

}

 
新增加元素还会有原来的事件总代码
 
<!;
   oUl.;
      oUl.appendChild(oLi)
   }
}

</</</</</li>
  </ul>
</body>
</html>

JS事件委托学习(转)的更多相关文章

  1. JS事件委托的原理和应用

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

  2. js事件委托 jQuery写法

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

  3. 原生js事件委托(事件代理)方法扩展

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

  4. JS事件委托(代理)学习笔记

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

  5. js事件委托

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

  6. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  7. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  8. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  9. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

随机推荐

  1. Thinking in Java——笔记(7)

    Reusing Classes The first is composition,You're simply reusing the functionality of the code, not it ...

  2. DataTable使用技巧总结【转】

    一.DataTable简介 ()构造函数 DataTable() 不带参数初始化DataTable 类的新实例. DataTable(string tableName) 用指定的表名初始化DataTa ...

  3. Python之路-python(面向对象进阶(模块的动态导入、断言、Socket Server))

    模块的动态导入 断言 Socket Server 一.模块的动态导入 class C(object): def __init__(self): self.name = "zhangsan&q ...

  4. 如何确定某个counter对应的rrd文件

    info.py #!/usr/bin/env python import requests import json import sys d = [ { "endpoint": s ...

  5. sms-provider

    @ 最近测试 open-falcon. @ 首先得准备报警接口. sms-provider 邮件发送http接口: method: post params: content: 邮件内容 subject ...

  6. Javascript AMD学习

    我们知道在其它编程语言中, 都有包(命令空间)的概念, 帮助我们更好的管理代码结构. 如java中的package, python中的module. 但是在js语言中, 在一个页面执行环境内, 所有引 ...

  7. 使用Karma 来进行 JavaScript 测试

    最近接触了一些新的前端开发知识,主要是利用AngularJS做single page application.我也借这个机会,花了几天时间了解了如何对javascript进行测试. 这里将介绍一些使用 ...

  8. Struts2(五):ActionSupport

    我们在上一章节中的一个列子中使用到了一个标识跳转到登录页面的例子: 示例是这样写的: index.jsp: <br/> <a href="gotoLoginPage&quo ...

  9. Idea 常用快捷键列表

    Idea 常用快捷键列表 Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和包Alt+Insert ...

  10. Leetcode: Largest BST Subtree

    Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where largest mea ...