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一般写法:

window.onload = function(){

    var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li'); for(var i=; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
}
aLi[i].onmouseout = function(){
this.style.background = ' ';
}
} }

事件委托的js写法:

window.onload = function(){
  var oUl = document.getElementById('ul');
  var aLi = oUl.getElementsByTagName('li');
  /*这里用到事件源:event对象, 事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
  ie: window.event.srcElent
  标准下: event.target
  nodeName: 找到元素的标签名;
  */
  oUl.onmouseover = function(ev) {
  var ev = ev||window.event;
  var target = ev.target || ev.srcElement;
  // console.log(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = 'red';
}
}
  oUl.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target|| ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){
target.style.background = ' ';
}
  }
}

事件委托的jq写法

    $(function(){
$("#ul").on('click','li',function(){
if(!$(this).attr('s')){
$(this).css('background','red');
$(this).attr('s',true);
}else{
$(this).css('background','#fff');
$(this).removeAttr('s');
}
})
})

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. NPM的安装和使用权限问题

    npm之前在默认情况下装过@angular/cli, 安装和使用都没有任何问题, 但是有的包全局安装的时候会提示权限不足, 于是网上搜索了修复此问题的方法, 就是将npm的全局安装目录搬到有权限的文件 ...

  2. FastJson反序列化获取不到值

    今天碰到一个问题,使用fastjson反序列化,就是将JSON解析成javaBean时,一个字段值为null.后面经查,是JavaBean中的set方法写错了,fastJson解析的是利用反射通过se ...

  3. POJ 2299-Ultra-QuickSort-线段树的两种建树方式

    此题有两种建树方式! Description In this problem, you have to analyze a particular sorting algorithm. The algo ...

  4. Spring (1)框架

    Spring第一天笔记   1. 说在前面 怎样的架构的程序,我们认为是一个优秀的架构? 我们考虑的标准:可维护性好,可扩展性好,性能. 什么叫可扩展性好? 答:就是可以做到,不断的增加代码,但是可以 ...

  5. 烧脑!CMU、北大等合著论文真的找到了神经网络的全局最优解

    烧脑!CMU.北大等合著论文真的找到了神经网络的全局最优解 机器之心 ​ 已认证的官方帐号 811 人赞同了该文章 选自arXiv,作者:Simon S. Du.Jason D. Lee.Haochu ...

  6. 怎样解决多层this指向全局对象window的问题

    如下所示, 得到的结果里面, 第二个this指向的是window这个全局对象而非f2, 原因就是多层this造成的指向不明引起的. var a = { f1: function(){ console. ...

  7. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  8. Effective Java 读书笔记(三):类与接口

    1 最小化类和成员的可访问性 (1)封装 封装对组成系统的组件进行解耦,从而允许这些组件独立开发,测试,优化,使用,理解和修改. 封装提高了软件的复用性,因为组件间的耦合度低使得它们不仅在开发环境,而 ...

  9. ubuntu装openssh-client和openssh-server

    1. 修改update源 进入/etc/apt/目录,首先用cp命令将sources.list备份成sources.list.bk,然后复制http://www.cnblogs.com/eastson ...

  10. opencv-02--图像的邻域操作

    图像的邻域操作 很多时候,我们对图像处理时,要考虑它的邻域,比如3*3是我们常用的,这在图像滤波.去噪中最为常见,下面我们介绍如果在一次图像遍历过程中进行邻域的运算. 下面我们进行一个简单的滤波操作, ...