事件委托的三阶段学习

DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡

IE事件流 叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档)。事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播。

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

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

好处:1,提高性能。

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

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</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>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</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);
  }
}

时间: 2024-11-01 14:39:34

事件委托的三阶段学习的相关文章

Java第三阶段学习(一、IO流------File类)

一.IO概述: 把内存中的数据存入到硬盘(持久化设备)中叫做:输出(写)Output操作.JAVA软件往电脑硬盘上走叫输出. 把硬盘中的数据读取到到内存里叫做:输入(读)Input操作.电脑硬盘上往JAVA软件里走叫输入. 以JAVA软件为参照物. 这种输入输出的动作叫做IO操作. 二.File类(文件类) 2.1定义:File是文件和目录(文件夹)路径名的抽象表现形式,即:JAVA把文件和目录都封装为File对象. 2.2构造函数: //File构造方法无法判定你写的这个文件是否真的存在 //

Java第三阶段学习(四、缓冲流)

一.缓冲流: Java中提供了一套缓冲流,它的存在,可提高IO流的读写速度 缓冲流,根据流的分类分为:字节缓冲流与字符缓冲流. 二.字节缓冲流: 字节缓冲流根据流的方向,共有2个: 1.写入数据到流中,字节缓冲输出流 BufferedOutputStream 2. 读取流中的数据,字节缓冲输入流 BufferedInputStream 它们的内部都包含了一个缓冲区,通过缓冲区读写,就可以提高了IO流的读写速度 2.1字节缓冲输出流 BufferedOutputStream类 public cla

jquery事件绑定与事件委托

//事件绑定简写形式 $(".div2 button").click(function () { $(".div1").scrollTop(0) }) //写全了方式 $('.div2 button').bind('click', function () { }) //解除绑定 $('.div2 button').unbind('click', function () { }) //事件委托 注意三个参数的顺序,第一个是绑定事件,第二个是标签,第三个是方法 /* $

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) <div id="container"> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> </div> var btn1 =

算法学习三阶段

?? 第一阶段:练经典经常使用算法,以下的每一个算法给我打上十到二十遍,同一时候自己精简代码, 由于太经常使用,所以要练到写时不用想,10-15分钟内打完,甚至关掉显示器都能够把程序打 出来. 1.最短路(Floyd.Dijstra,BellmanFord) 2.最小生成树(先写个prim,kruscal 要用并查集,不好写) 3.大数(高精度)加减乘除 4.二分查找. (代码可在五行以内) 5.叉乘.判线段相交.然后写个凸包. 6.BFS.DFS,同一时候熟练hash 表(要熟,要灵活,代码要

白帽子学习(三阶段)

第一阶段:加密解密 (1)逆向 (2)PE知识强化(写PE分析工具) (3)脱壳加壳 (4)免杀 (5)逆向算法的研究 (5)将视频破解,写出注册机 掌握语言: Python C++ C       (get) 汇编    (get):还是要多总结一些潜规则 API编程 Linux指令: 第二阶段:web渗透 可以给360提交一些漏洞 第三阶段:基础再加固 计算机网络: 数据结构的实现(1500): 操作系统: 数据库 目前先将嵌入式放一放,但嵌入式的学习对理解linux和底层是很有帮助的

JavaScript 学习笔记— —事件委托

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果 //好处 //1.提高性能 //2.新添加的元素,还会有之前的事件 //event