在"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. svn 回退/更新/取消至某个版本命令详解【转】
			
    转自:http://www.cnblogs.com/mfryf/p/4654110.html 1. 取消Add/Delete 取消文件 svn revert 文件名 取消目录 svn revert - ...
    
			
    2. 
						
  2. git 入门常用命令（转）
			
    Git工作流程:D:\projects\Setup2\Setup2\Setup2\Express\SingleImage\DiskImages\DISK1 git clone工作开始之初,可通过git ...
    
			
    3. 
						
  3. 巧用PHP双$功能兼容线上线下配置文件
			
    2014年2月8日 19:27:05 情景: 开发过程中线上和线下的配置文件中的值是不一样的 例如:线上生产环境的样式域名为ie.style.abc.com,而开发环境为ie.style.abc.ne ...
    
			
    4. 
						
  4. Densenet-Tensorflow
			
    在寻找densnet网络的时候,我发现了一个结构清晰完整的网络代码,在此作备份. https://github.com/taki0112/Densenet-Tensorflow Densenet-Te ...
    
			
    5. 
						
  5. [USACO17FEB]Why Did the Cow Cross the Road I G
			
    一开始想写$DP$,发现直接转移完全有后效性 所以本小蒟蒻写了个最短路 每走三步就要吃草是这个题最难搞的地方,我们建图时不妨只对于距离等于三的点连边 考虑完全覆盖所有情况,从一个点走一步,两步,然后三 ...
    
			
    6. 
						
  6. 关于NOIP2018初赛
			
    题面 这次PJ初赛有点傻了,可能是因为兴华水土不服吧(在这荒度了六年级的光阴). 选择题 DDDBBAAAABABBBB 第四题 当时懵了,我啥也不知道,于是就开始蒙 A.LAN B.WAN C.MA ...
    
			
    7. 
						
  7. ***Linux系统下如何查看及修改文件读写权限
			
    查看文件权限的语句: 在终端输入:ls -l xxx.xxx (xxx.xxx是文件名) 那么就会出现相类似的信息,主要都是这些:-rw-rw-r-- 一共有10位数 其中: 最前面那个 - 代表的是 ...
    
			
    8. 
						
  8. mavean项目的jar位置的影响
			
    由于项目的数据库需求改变了,有mysql数据库变为oracle的,那么对于项目就是需要改变数据库连接池.这个项目运用了mavean框架,那么下载jar在pom.xml文件中填写就可以了,但是oracl ...
    
			
    9. 
						
  9. 【LOJ】#2264. 「CTSC2017」吉夫特
			
    题解 根据一番认真严肃的猜结论和打表证明之后 我们可以得到 \(f[i] = (\sum_{a[i] \& a[j] == a[j]} f[j]) + 1\) 统计所有的\(f[i] - 1\ ...
    
			
    10. 
						
  10. kotlin下载地址收藏
			
    由于android studio 不同版本对应的kotlin版本是不同的,现在收藏 kotlin下载地址     https://plugins.jetbrains.com/plugin/6954-k ...
    
			
    11.