在"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. 【译】EntityFramework6与EntityFrameworkCore的区别
			
    EntityFramework6 EF6 是一个久经考验的数据库访问技术,发展多年,拥有许多特性,并且成熟稳定.2008年EF作为 .Net 3.5 Sp1 和Visual Studio 2008 S ...
    
			
    2. 
						
  2. 大数据系列之并行计算引擎Spark介绍
			
    相关博文:大数据系列之并行计算引擎Spark部署及应用 Spark: Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎. Spark是UC Berkeley AMP lab ( ...
    
			
    3. 
						
  3. php的递归函数示例
			
    递归函数太难理解了,写了一个示例放在这里方便没事的时候看一下. <?php /** *php递归函数示例 *(从1到100的累加和计算) * */ function summation($num ...
    
			
    4. 
						
  4. WCF开发中将net.tcp协议寄宿到IIS的方法
			
    1 部署IIS 1.1 安装WAS IIS原本是不支持非HTTP协议的服务,为了让IIS支持net.tcp,必须先安装WAS(Windows Process Activation Service),即 ...
    
			
    5. 
						
  5. 在Jenkins中配置执行远程shell命令（转）
			
    用过Jenkins的都知道,在Build配置那里有1个Add buld step, 有这样两个选项: 1. Execute Windows batch command 2. Execute shell ...
    
			
    6. 
						
  6. .NetCore下使用Prometheus实现系统监控和警报 （三）集成Grafana
			
    有了前面InfluxDB的经验,这里就很好处理了,数据类型选择Prometheus选地址等,填好保存 同样通过导入数据处理,我们在https://grafana.com/dashboards上选择Da ...
    
			
    7. 
						
  7. ORM,DAO,MVC,POJO
			
    1.ORM 对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间 ...
    
			
    8. 
						
  8. Java第三阶段学习（十一、Servlet基础、servlet中的方法、servlet的配置、ServletContext对象）
			
    一.Servlet简介  1.什么是servlet: sun公司提供的一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过java的API动态的向 ...
    
			
    9. 
						
  9. 000 关于IDEA的基本环境配置以及快速使用（git拉载程序，Jdk安装，tomcat部署，应用程序打包运行）
			
    刚开始工作的时候,不熟悉,所以整理过这个文档. 一:导入git程序 1.准备 git链接 IDEA软件,最好是终极版 2.第一步选择从版本控制上选择git 3.拷贝源于目标地址 4.这时候根据引导进行 ...
    
			
    10. 
						
  10. 2013-2014 ACM-ICPC Brazil Subregional Programming Contest 题解
			
    [题目链接] 这场比赛题面英文都好长... ... A - Zero or One 模拟. #include <bits/stdc++.h> using namespace std; in ...
    
			
    11.