在"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. Linux内存管理 【转】
			
    转自:http://blog.chinaunix.net/uid-25909619-id-4491368.html Linux内存管理 摘要:本章首先以应用程序开发者的角度审视Linux的进程内存管理 ...
    
			
    2. 
						
  2. 如何将IOS版本的更新下载文件指向到自己的服务器
			
    针对那些使用企业签名但是没有发布到AppSotre的IOS版本APP自动更新问题解决方案: 在apicloud中是这样说明的: 因为要填写plist地址所以不能向安卓那样直接填写服务器文件地址,但是直 ...
    
			
    3. 
						
  3. springcloud使用使用Feign-Ribbon做负载均衡实现声明式REST调用
			
    什么是Feign Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解 ...
    
			
    4. 
						
  4. 解决创建maven项目Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart问题
			
    今天用eclipse创建项目的时候报错如下图: 解决方案: 1.下载最新版maven-archetype-quickstart-1.1.jar   2.命令行到下载目录下执行mvn install:i ...
    
			
    5. 
						
  5. java虚拟机规范(se8)——java虚拟机结构(五)
			
    2.10 异常 java虚拟机中的异常用Throwable类或者它的子类的实例来表示.抛出一个异常会导致立即非本地(an inmediate nolocal)的控制转移,从发生异常的地方跳到处理异常的 ...
    
			
    6. 
						
  6. MySql 新建用户与数据库的实际操作步骤
			
    以下的文章主要讲述的是MySql 新建用户的创建.新建数据库的实际操作步骤以及用户如何进行授权和删除用户的实际操作方案.还有对修改密码的实际操作,以下就是正文的主要内容的创建. 1.MySql 新建用 ...
    
			
    7. 
						
  7. 玲珑OJ 1129 - 喵哈哈村的战斗魔法师丶坏坏い月
			
    1129 - 喵哈哈村的战斗魔法师丶坏坏い月 Time Limit:3s Memory Limit:256MByte Submissions:315Solved:71 DESCRIPTION 坏坏い月 ...
    
			
    8. 
						
  8. Java编程的逻辑 (61) - 内存映射文件及其应用 - 实现一个简单的消息队列
			
    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
    
			
    9. 
						
  9. 【LOJ】#2536. 「CQOI2018」解锁屏幕
			
    题解 什么破题,看一眼就能想出来\(n^2 2^n\)看了一眼数据范围有点虚,结果跑得飞快= = 处理出\(a[i][j]\)表示从\(i\)到\(j\)经过的点的点集 然后\(f[i][S]\)表示 ...
    
			
    10. 
						
  10. 【AtCoder】ARC103
			
    C - //// 为了防止一些多余的判断,我选择直接记录每个数的个数,然后枚举第一个数,找第一个数之外第二个数改变最少的情况下应该选什么 代码 #include <bits/stdc++.h&g ...
    
			
    11.