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

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

好处:

  1,提高性能

我们可以看一个例子:需要触发每个li来改变他们的背景颜色。

<ul id="ul">
  <li id="1">001</li>
  <li id="2">002</li>
  <li id="3">003</li>
  <li id="4">004</li>
</ul>
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变.

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

2,新添加的元素还会有之前的事件。

我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li  如:

<input type="button" id="btn" />
<ul id="ul">
  <li id="1">001</li>
  <li id="2">002</li>
  <li id="3">003</li>
  <li id="4">004</li>
</ul>
不用事件委托我们会这样做:
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4; oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(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;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}

js的事件委托的更多相关文章

  1. 对JS中事件委托的理解

    什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...

  2. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  3. JS:事件委托

    事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...

  4. js 利用事件委托解决mousedown中的click

    有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...

  5. js的事件委托机制

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  6. js 使用事件委托

    想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为.这个时候,你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者 ...

  7. js实现事件委托

    事件委托的概念: 事件委托就是利用事件冒泡,把事件加到父元素或祖先元素上,触发执行效果. 事件委托的写法: btn6.onclick = function(event){ event = event ...

  8. JS 的事件委托机制

    以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便 ...

  9. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

随机推荐

  1. 114 的 dns 的解析测试

    114 的 dns 号称使用  BGP Global AnyCast 技术多点部署 的方式, 可以将用户请求导向到"就近"的服务器,理论上是可以得到域名网络就近解析的IP的,所以将 ...

  2. Python Day02

    Python 代码执行流程: 编译 --> 执行 源代码  -->  字节码  -->  机器码  --> CPU执行 python 先将自己的源代码,编译成Python 字节 ...

  3. Hibernate1

    计应134(实验班) 杨伟 Hibernate的核心接口一共有6个,分别为:Session.SessionFactory.Transaction.Query.Criteria和Configuratio ...

  4. 常用OpenLDAP命令

    ldappasswd -x -D "cn=Manager,dc=clouderachina,dc=com" -W "uid=mis,ou=Group,dc=clouder ...

  5. python2.7安装matplotlib遇到的问题及解决方法

    python2.7下import matplotlib报错 第一个报错是:缺少这个pyparsing-2.1.4.win32-py2.7.exe 直接下载安装就行 第二个报错是:缺少cycler 这个 ...

  6. Android Fragment

    1.Fragment必须是依存与Activity而存在的,因此Activity的生命周期会直接影响到Fragment的生命周期. 2.Fragment 生命周期: 首页 最新文章 在线课程 业界 开发 ...

  7. Manjaro mirror in china

    1, mirrot file: /etc/pacman.d/mirrorlist Server = http://mirrors.ustc.edu.cn/manjaro/stable/$repo/$a ...

  8. Command Pattern

    当(客户)对象访问(服务)请求服务时,最直接的方法就是方法调用.

  9. css:writing-mode属性

    writing-mode属性 实现文字垂直排版 下面是css3语法: /* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: v ...

  10. C语言程序设计第5堂作业

    一.本次课学习主要内容及知识结构点: 二.实验内容:(60分) 1. 求奇数和.输入一批正整数(以零或负数为结束标志),求其中的奇数和.试编写相应程序. 2. 展开式求和.输入一个实数 x,计算并输出 ...