1、引言

现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);

这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法;

2、概念

通俗来讲: 事件有:onclick、onmouseover、onmouseout等等;委托呢,就是让别人来做,这件事情本身是加在元素上,然而你却加载别人身上来做,完成事件;

3、原理

利用冒泡原理,将事件加在父级上触发,执行效果;

4、好处

  1. 提高性能;
  2. 新添加元素,可以直接拥有事件;

5、事件源

跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的。

6、使用情景

  * 为DOM中的很多元素绑定相同事件;
  * 为DOM中尚不存在的元素绑定事件;

7、举栗子

需要触发每个li来改变他们的背景颜色
```html

  • 111111111
  • 22222222222
  • 33333333
  • 44444444444

js一般写法:

  1. window.onload = function(){
  2.  
  3. var oUl = document.getElementById('ul');
  4. var aLi = oUl.getElementsByTagName('li');
  5.  
  6. for(var i=; i<aLi.length; i++){
  7. aLi[i].onmouseover = function(){
  8. this.style.background = 'red';
  9. }
  10. aLi[i].onmouseout = function(){
  11. this.style.background = ' ';
  12. }
  13. }
  14.  
  15. }

事件委托的js写法:

  1. window.onload = function(){
  2.   var oUl = document.getElementById('ul');
  3.   var aLi = oUl.getElementsByTagName('li');
  4.   /*这里用到事件源:event对象, 事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
  5.   ie: window.event.srcElent
  6.   标准下: event.target
  7.   nodeName: 找到元素的标签名;
  8.   */
  9.   oUl.onmouseover = function(ev) {
  10.   var ev = ev||window.event;
  11.   var target = ev.target || ev.srcElement;
  12.   // console.log(target.innerHTML);
  13. if(target.nodeName.toLowerCase() == "li"){
  14. target.style.background = 'red';
  15. }
  16. }
  17.   oUl.onmouseout = function(ev) {
  18. var ev = ev || window.event;
  19. var target = ev.target|| ev.srcElement;
  20.  
  21. if(target.nodeName.toLowerCase() == 'li'){
  22. target.style.background = ' ';
  23. }
  24.   }
  25. }

事件委托的jq写法

  1. $(function(){
  2. $("#ul").on('click','li',function(){
  3. if(!$(this).attr('s')){
  4. $(this).css('background','red');
  5. $(this).attr('s',true);
  6. }else{
  7. $(this).css('background','#fff');
  8. $(this).removeAttr('s');
  9. }
  10. })
  11. })

JavaScript, JQuery事件委托的更多相关文章

  1. JavaScript / JQuery事件委托如何实现?

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

  2. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. jQuery事件委托

    jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-i ...

  5. jquery事件委托详解

    jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...

  6. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  7. Jquery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  8. 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

  9. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

随机推荐

  1. [转帖]Linux系列之SAR命令使用详解

    Linux系列之SAR命令使用详解 sar是System Activity Reporter(系统活动情况报告)的缩写.这个工具所需要的负载很小,也是目前linux中最为全面的性能分析工具之一.此款工 ...

  2. Xpath解析

    import requests from lxml import etree url = 'https://www.huawei.com/cn/?ic_medium=direct&ic_sou ...

  3. python学习-19 字典

    字典dict 1.dic = {key:value,key:value} 字典有{ }括住,字典的value可以是任意值,字典的key的值不包括列表和字典 di = {"age": ...

  4. 开启 oracle 的闪回功能

    查看是否开启闪回 SQL> select flashback_on from v$database; FLASHBACK_ON ------------------ NO 查看是否配置了db_r ...

  5. 解析spring启动加载dubbo过程

    一:简单配置 web.xml <context-param> <param-name>contextConfigLocation</param-name> < ...

  6. MySQL INNER JOIN子句介绍

    MySQL INNER JOIN子句介绍 MySQL INNER JOIN子句将一个表中的行与其他表中的行进行匹配,并允许从两个表中查询包含列的行记录. INNER JOIN子句是SELECT语句的可 ...

  7. findstr 命令使用

    findstr 命令使用 find /? 在文件中搜索字符串. FIND [/V] [/C] [/N] [/I] [/OFF[LINE]] "string" [[drive:][p ...

  8. pandas简介

  9. jQuery入门简述

    jQuery 是一套快速的,简洁的 javaScript 脚本库,jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javaScript 高手加入其组织,使用户能更方 ...

  10. 改写Unity DropDown 支持多次点击同一选项均回调

    [很久前的一个Note,不知道现在的Unity Dropdown是否已经支持该特性] Unity UGUI是开源的: https://bitbucket.org/Unity-Technologies/ ...