在"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. git 入门常用命令（转）
			
    Git工作流程:D:\projects\Setup2\Setup2\Setup2\Express\SingleImage\DiskImages\DISK1 git clone工作开始之初,可通过git ...
    
			
    2. 
						
  2. 使用css实现移动端导航条滚动
			
    <div class="tab"> <div class="table-item"> <span class="tab- ...
    
			
    3. 
						
  3. GET和POST两种基本请求方法的区别(转载)
			
    get与post请求的区别: 通常回答: GET在浏览器回退时是无害的,而POST会再次提交请求. GET产生的URL地址可以被Bookmark,而POST不可以. GET请求会被浏览器主动cache ...
    
			
    4. 
						
  4. LeetCode（12）：整数转罗马数字
			
    Medium! 题目描述: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字  ...
    
			
    5. 
						
  5. JS模块化编程（一）：CommonJS，AMD/CMD
			
    前言 模块化是什么? 为什么采用模块化? 场景: 一个html,因不同的业务需求开发,会不断的引入js文件.另外,a.js和b.js中的变量或函数必须是全局的,才能暴露给使用方. <script ...
    
			
    6. 
						
  6. final修饰的地址不能被修改
			
    package final0; /* * 顾客 */public class Customer { // 属性 String name; int age; // 父类object的方法 public  ...
    
			
    7. 
						
  7. 006 jquery过滤选择器-----------（可见性过滤选择器）
			
    1.介绍 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
    
			
    8. 
						
  8. Zookeeper项目开发环境搭建（Eclipse\MyEclipse + Maven）
			
    写在前面的话 可详细参考,一定得去看 HBase 开发环境搭建(Eclipse\MyEclipse + Maven) 我这里,相信,能看此博客的朋友,想必是有一定基础的了.我前期写了大量的基础性博文. ...
    
			
    9. 
						
  9. web理论知识--HTML结构及标签
			
    一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像. ...
    
			
    10. 
						
  10. Python3 决策树ID3算法实现
			
    # -*- coding: utf-8 -*- """ Created on Wed Jan 24 19:01:40 2018 @author: markli 采用信息增 ...
    
			
    11.