事件委托和this
JavaScript不仅门槛低,而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景,所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书,除非你去参加工作面试才会去思考为什么或者怎么做,否则JavaScript只是你工作的内容。
这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于 Darcy Clarke的JavaScript典型面试问题列表。希望你不仅仅是为了答案而阅读完这篇文章,每一篇文章会让对过去学过的知识有一个新的理解,或者重温你学习的东西,这有利于你用JavaScript实现所有交互。
详解事件委托
事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。用document
元素来处理按钮的点击行为就是事件委托的一个例子,另一种常见情况是,用ul
元素来处理其子元素li
的事件。
有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件,并支持事件捕获和事件冒泡。W3C关于浏览器怎么支持事件的文档:W3C DOM Level 3 Events。一些JS库和框架公开了其它方式,如发布/订阅模型(将在后文提及)。
事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点)。浏览器会向下遍历DOM树直到找到触发事件的元素,一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿DOM树向上冒泡直到最顶层容器,看看是否有其它元素需要使用同一个事件。
下面的示例说明了这个过程。点击按钮会导致事件流识别本身在容器下面的文本,每一个元素都接收同样的点击监听代码,由于事件捕获,点击事件会首先触发HTML节点绑定的点击处理程序,然后在事件冒泡阶段的末尾返回到最顶层元素。
大多数现代库使用冒泡监听,而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPropagation
告诉DOM事件停止冒泡,第二个方式是调用stopImmediatePropagation
,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。
还有第三个可以控制元素如何对事件作出回应的方法。所有现代浏览器支持preventDefault
方法,这个方法会阻止浏览器处理事件的默认行为。一个常见示例就是链接,使用链接执行UI操作是一种常见的做法。然而,当我们不希望链接跟普通被激活的链接一样会在新标签页打开一个新页面,就可以使用preventDefault
方法来阻止这个默认行为。
还有其它实现事件委托的方法可以考虑,其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型,牵涉到两个参与者。通常,两个参与者在DOM中并没有紧密的联系,而且可能是来自兄弟的容器。可以给它们共同的祖先元素设置监听处理程序,但是如果共同的祖先元素在DOM树中处于较高层次(离根节点比较近),就会监听很多同辈元素的事件,会造成意想不到的结果;当然,也可能存在逻辑或结构原因要分开这两个元素。
发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历,有时也向下遍历,DOM会通知遍历路径上的所有元素事件发生了。在下面的示例中,JQuery通过trigger
方法传递事件。
使用事件委托来管理事件流有很多优点,其中最大的优点是改善性能。元素绑定的每一个监听器都会占用一些内存,如果页面上只有少数几个监听器,我们也不会注意到它们之间的区别,然后,如果要监听一个50行5列的表格中的每个单元格,你的Web应用会开始变慢,为了使应用程序最快运行的最好方式是保持尽可能低的内存使用。
使用事件委托能减少监听器数量,在元素的容器上绑定事件意味着只需要一个监听器。这种方法的缺点是,父容器的侦听器可能需要检查事件来选择正确的操作,而元素本身不会是一个监听器。额外处理带来的影响远低于许多存在内存中的监听器。
更少的监听器和更少的DOM交互也易于维护。父容器层次的监听器能处理多种不同的事件操作,这是一种简单的方法来管理相关的事件操作,这些事件通常需要执行相关功能或需要共享数据。
如果父容器是监听器,然后要执行独立的内部操作而并不需要添加或者移除本身的监听器。元素操作在单页应用中是极其常见的,为某部分添加一个按钮这样简单的事情也会为应用程序创建一个潜在的性能块,没有合适的事件委托,就必须手动为每一个按钮添加监听,如果每个侦听器不清理干净,它可能会导致内存泄漏。浏览器不会清理页面,因此在单页应用中,所有从内存中清理不当的碎片都会留在内存中,这些碎片会降低程序性能。
当在页面中添加交互时,仔细考虑一下,是否真的需要去监听元素。
另一篇值得一读的文章:Event Delegation In JavaScript
this在JavaScript中是怎么工作的
this
关键字在JavaScript中的一种常用方法是指代码当前上下文。
- 如果
this
没有被设置,则默认指向全局对象,其通常是window
- 如果一个函数中运行了一个内联函数,比如一个事件监听器,则
this
指向内联函数的源代码。例如,当设置一个按钮的单击处理程序,this
将引用匿名函数内的按钮。 - 如果函数是一个对象的构造函数,
this
指向新对象。 - 如果函数被定义在一个对象上,然后调用对象时,
this
指向该对象。
在异步编程中,this
可以很容易改变过程中一个功能操作。保持处理程序上下文的一个小技巧是将其设置到闭包内的一个变量,当在上下文改变的地方调用一个函数时,如setTimeout
,你仍然可以通过该变量引用需要的对象。
操作this
的另一种方式是通过call
、apply
和bind
。三种方法都被用于调用一个函数,并能指定this
的上下文,你可以让代码使用你规定的对象,而不是依靠浏览器去计算出this
指向什么。Call
、apply
和bind
本身是相当复杂的,应该有自己的文档记录,我们会把这当做未来待解决问题的一部分。下面是一个改变this
指向方法的示例:
事件委托和this
是现代JavaScript中重要的功能,理解它们的工作原理是成功开发产品的关键,并且可以肯定的是,这是应聘JavaScript工程师必须要了解的。
事件委托和this的更多相关文章
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- js中的事件委托
原文 http://itindex.net/detail/48661-js-事件 1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢 ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- js_事件委托
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- jQuery-1.9.1源码分析系列(十) 事件系统——事件委托
jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- [JS]笔记14之事件委托
-->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...
- 记一次事件委托在 ios 下的兼容 bug
项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...
- C#-WebForm-WebForm开发基础、如何给控件注册事件?——事件委托写法、http无状态性、三层结构
(小知识 - xml:可扩展的标记语言 html:超文本标记语言) 一.创建WebForm:新建→网站 此时文件夹中只有一个 config 文件,打开后 二.在项目下右键添加新项 在设计页面中打开 从 ...
随机推荐
- JAVA 拆分窗口
//拆分窗口 import java.awt.*; import javax.swing.*; public class Jiemian8 extends JFrame{ JSplitPane cf; ...
- Windows下编译使用Aliyun OSS PHP SDK
摘要: WIN环境下搭建Aliyun OSS PHP SDK编译运行环境.从PHP的安装逐步完成,SDK的编译运行.即使没有任何PHP基础,也能顺利完成. 安装环境:Win7 64 + PHP 5.6 ...
- Java多线程之捕获异常
1.主线程不能捕获到子线程的异常 package Thread.Exection; import java.util.concurrent.ExecutorService; import java.u ...
- How To Easily Call WCF Services Properly z
Please note: this article has been superceded by the documentation for the ChannelAdam WCF Library. ...
- 华为ICDcomm接口js测试
1)获取坐席状态接口调用方法: “方法”------“坐席与班组” 中的 Phone.QueryAgentStatusEx(工号)如果该方法调用成功,那么坐席状态将会存入到属性: Phone.Agen ...
- [Flex] ButtonBar系列——垂直布局
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- [Flex] ButtonBar系列——flex3 皮肤和外观设置
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...
- 向sqlserver插入二进制数据(比如图片)
sqlserver插入二进制数据 偶然在sqlteam看到了,真是够绝,这都想得出来,很便捷的一个方式(只适用于SQL SERVER 2005+),代码如下: CREATE TABLE myTable ...
- lower_bound 和 upper_bound
Return iterator to lower bound Returns an iterator pointing to the first element in the range [first ...
- hive处理hbase数据
CREATE EXTERNAL TABLE table1( key string, zoneid int, result int, ) STORED BY 'org.apache.hadoop.hiv ...