在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制。现在需要使用这个事件处理机制为页面元素注册事件方法。

□ 点击页面任何部分触发事件

创建一个script1.js文件。

(function() {



    eventUtility.addEvent(document, "click", function(evt) {



        alert('hello');



    });



}());

页面部分。

<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



</head>



<body>





    <script src="eventUtility.js"></script>



    <script src="script1.js"></script>



</body>



</html>




输出结果：点击页面任何一处都会弹出框。


但，我们有时候希望点击document内的某个元素来触发事件。


□ 使用委托触发事件


在页面上增加a标签。


<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



</head>



<body>





    <div>



        <p><a href="#">点我</a></p>



    </div>



    <script src="eventUtility.js"></script>



    <script src="script1.js"></script>



</body>




把script1.js修改为：


(function() {



    eventUtility.addEvent(document, "click", function(evt) {



        //获取点击对象



        var target = eventUtility.getTarget(evt);





        //获取点击对象的tag名称



        var tagName = target.tagName;





        //如果tag是a



        if (tagName === "A") {



            alert("点我了");





            //阻止链接的默认行为



            eventUtility.preventDefault(evt);



        }



    });



}());









输出结果：只有点击页面上的a标签才弹出框。


以上的好处是：无论document内增加多少a标签元素，所有a标签都具有被触发的能力。像这种方式就是事件委托。我们希望为子元素注册事件，却把事件先注册到子元素的父级元素上，这样，在该父元素之内、动态添加的、任何与子元素同类的元素都注册了事件。


如果我们把事件注册到子元素上，在document中再动态添加与子元素同类的元素，都必须为这些刚动态添加的子元素分别注册事件。


另外，事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。


“JavaScript进阶系列”包括：


JavaScript进阶系列01,函数的声明，函数参数，函数闭包


JavaScript进阶系列02,函数作为参数以及在数组中的应用


JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象


JavaScript进阶系列04,函数参数个数不确定情况下的解决方案


JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数


JavaScript进阶系列06,事件委托


JavaScript进阶系列07,鼠标事件
												


											
JavaScript进阶系列06,事件委托的更多相关文章
	

    
								
  1. JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
		
    本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...
    
		
    2. 
						
  2. JavaScript进阶系列07,鼠标事件
		
    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
    
		
    3. 
						
  3. JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
		
    本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
    
		
    4. 
						
  4. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
		
    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...
    
		
    5. 
						
  5. JavaScript进阶系列02,函数作为参数以及在数组中的应用
		
    有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...
    
		
    6. 
						
  6. JavaScript进阶系列01,函数的声明，函数参数，函数闭包
		
    本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...
    
		
    7. 
						
  7. JavaScript面试问题：事件委托和this
		
            JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由 于有着各种各样的背景,所以不是每个人都对 ...
    
		
    8. 
						
  8. 《JAVASCRIPT高级程序设计》事件委托和模拟事件
		
    由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运 ...
    
		
    9. 
						
  9. JavaScript(jQuery)中的事件委托
		
    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. list的几种new方式比较ImmutableList
			
    数组的非空判断: -----数组的非空判断----- StringUtils.isNotBlank(array); list的非空判断: -----list的非空判断----- CollectionU ...
    
			
    2. 
						
  2. 驱动程序vmci.sys版本不正确。请尝试重新安装 VMware
			
    今天在测试一台服务器,安装在虚拟机里面,但是发现在安装后,重启了一下电脑,出现了这个错误: 无法获取 vmci 驱动程序版本: 句柄无效.驱动程序 vmci.sys 版本不正确.请尝试重新安装 VMw ...
    
			
    3. 
						
  3. linux后端诊断与调试技术
			
    本文不是liunx命令使用教程,也不打算全方面阐明其用法,互联网公司项目很多,服务程序之间相互依赖调用很复杂,各种因素会影响线程服务正常运行,特别是基础服务组件更是如此,当出现各种问题时,如何诊断li ...
    
			
    4. 
						
  4. zoj 3819(2014牡丹江现场赛 A题 )
			
    题意:给出A班和B班的学生成绩,如果bob(A班的)在B班的话,两个班级的平均分都会涨.求bob成绩可能的最大,最小值. A班成绩平均值(不含BOB)>A班成绩平均值(含BOB) &&a ...
    
			
    5. 
						
  5. 2018年长沙理工大学程序设计竞赛  J - 杯子
			
    题意: 链接:https://www.nowcoder.com/acm/contest/96/J一天durong同学买了一个无限长的杯子,同时买了n个球,并且标号为1,2,3......n,duron ...
    
			
    6. 
						
  6. 判断js数组/对象是否为空
			
    /** * 判断js数组/对象是否为空 * isPrototypeOf() 验证一个对象是否存在于另一个对象的原型链上.即判断 Object 是否存在于 $obj 的原型链上.js中一切皆对象,也就是 ...
    
			
    7. 
						
  7. RN组件可用属性整理
			
    
			
    8. 
						
  8. linux cudnn安装
			
    cudnn-8.0-linux-x64-v5.1链接:http://pan.baidu.com/s/1c1JuMty 密码:v0g9 #以CuDNN的v5.1版本,Cuda 8.0为例 sudo ta ...
    
			
    9. 
						
  9. SaaS模式介绍
			
     SaaS是Software-as-a-service(软件即服务). SaaS是一种通过Internet提供软件的模式,用户不用再购买软件,而改用向提供商租用基于Web的软件,来管理企业经营活动,且 ...
    
			
    10. 
						
  10. [转]C++ template —— 模板基础（一）
			
    <C++ Template>对Template各个方面进行了较为深度详细的解析,故而本系列博客按书本的各章顺序编排,并只作为简单的读书笔记,详细讲解请购买原版书籍(绝对物超所值).---- ...
    
			
    11.