数码资讯
编写性能高效Javaｓｃｒｉｐｔ事件的技术
如何有效的进行Web前端程序，我不自觉地想到每一次我做前端开发的一个问题。几年前，雅虎牛逼的前端工程师做了一本书的Web前端性能，在网络技术发展的一个感觉，Web前端优化问题已经成为一个神秘的街上白菜、丹尼尔和菜鸟能回答Web前端优化的简单的问题，当整个行业知道秘密的答案，然后在现有的优化技术的发展
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
如何有效的进行Web前端程序，我不自觉地想到每一次我做前端开发的一个问题。几年前，雅虎牛逼的前端工程师做了一本书的Web前端性能，在网络技术发展的一个感觉，Web前端优化问题已经成为一个神秘的街上白菜、丹尼尔和菜鸟能回答Web前端优化的简单的问题，当整个行业知道秘密的答案，然后在现有的优化技术的发展离不来你的网站的问题，为了使我们的网站性能开发的网站比别人更优秀，我们需要独立思考更深入、更优秀水库层的制备技术。
Javaｓｃｒｉｐｔ中的事件系统是我曾经想到的第一个突破，为什么是Javaｓｃｒｉｐｔ事件系统我们都知道Web前端包含三种技术：HTML、CSS和Javaｓｃｒｉｐｔ。如何结合HTML和CSS是非常清楚的：样式、类、ID和HTML标记。这是不容易的，但它是如何进入HTML的中间和三者的融合我终于找到了事件系统的出发点是Javaｓｃｒｉｐｔ，不管我们如何写复杂的Javaｓｃｒｉｐｔ代码，最终体现在HTML和CSS的事件，通过该系统，所以我想既然事件系统是三个整合的起点，然后一个页面，尤其是必须有一大批事件操作的今天日益复杂的网页，而这些事件我们精心准备的Javaｓｃｒｉｐｔ代码只有冰释前嫌，没用的。因为在页面上有很多事件的功能，我们可以有一个问题，影响效率，根据习惯写事件的功能我所研究的答案是一个真正的效率问题，这是一个严重的效率问题。
为了澄清我的答案，我想详细地解释Javaｓｃｒｉｐｔ事件系统。
事件系统是Javaｓｃｒｉｐｔ、HTML和CSS集成的切入点。这个切入点是在java的主要功能。所有的魔法都是从这里开始的。那么浏览器是如何做到这一点的呢我学习的方法有3种。他们是:
方式一：HTML事件处理
HTML事件处理是直接在HTML标签中编写事件函数，因为它与HTML标签紧密耦合，因此称为HTML事件处理：
复制代码代码如下所示：
U3000 U3000
如果单击事件函数复杂，编写代码会不方便。所以我们经常写函数在调用函数的名字，和我直接，例如：
复制代码代码如下所示：
功能btnclk（）{
警报（单击我）！；
}
该方法是一种非常优美的文字，现在很多人仍然不自觉地使用它，但也许很多人不知道，在一个风格不一的方法的鲁棒性，这是我最近在非阻塞加载脚本技术时遇到的问题的研究，因为根据前端优化Javaｓｃｒｉｐｔ代码的原理通常位于页面底部的页面已经在HTML标签脚本参考功能受阻，不能执行的时候，我们单击页面按钮，将提供XXX函数未定义的错误在Javaｓｃｒｉｐｔ中，错误会被抓，尝试。因此，为了使代码更健壮，我们将进行以下重写：
复制代码代码如下所示：
U3000 U3000
看到上面的代码是恶心，可以描述。
模式二：dom0级事件处理
做水平事件处理是所有的浏览器都支持事件处理。没有兼容性问题。它将使每一个Web前端兴奋，dom0事件处理的规则是：每一个DOM元素都有自己的事件处理属性，可以指定一个函数，如下面的代码：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
btndom.onclick =函数（）{
警报（单击我）！；
}
事件属性的水平做事件处理中定义的方法的名称+事件，而整个属性是一个小写字母。我们知道DOM元素是Javaｓｃｒｉｐｔ代码的Javaｓｃｒｉｐｔ对象，例如它是理解水平做事件处理的Javaｓｃｒｉｐｔ对象，角度很容易的，下面的代码：
复制代码代码如下所示：
btndom.onclick = null；
然后按钮的单击事件被取消。
再看下面的代码：
复制代码代码如下所示：
btndom.onclick =函数（）{
警报（单击我）！；
}
btndom.onclick =函数（）{
警报（点击me1111！；
}
下一个函数将覆盖第一个函数。
模式三：DOM2事件处理和IE的事件处理
DOM2事件处理是一个标准化的事件处理方案，但IE浏览器做了一组功能类似DOM2事件处理，但代码是不相同的。
在解释三的方法之前，我必须添加一些概念，否则我就不能说出第三条的含义。
第一个概念是事件的流程。
在页面开发中我们常常遇到这样的情况，一个页面的工作范围可以在文档在Javaｓｃｒｉｐｔ中表达，一个div页面，DIV覆盖文档中的元素，div里面的一个按钮元件，按钮元件覆盖div，也被覆盖的文件，那么问题是，当我们点击这个按钮，在行为不仅点击按钮，DIV和文档的点击操作，根据这三个要素的逻辑可能会触发单击事件，和事件流是场景的概念描述，意思是：从活动页面接收事件订单流程。
第二个概念：事件泡沫和事件捕获
事件冒泡是微软公司解决事件流问题的一种解决方案，事件捕获是由Netscape公司提出的事件流解决方案。
泡沫事件开始的div，然后身体，最后文件，事件捕捉倒挂的头文件，然后身体，相比之下，最后的目标元素div，微软公司方案更加人性化，符合人们的操作习惯，程序是Netscape非常尴尬，这是网景的浏览器大战结果，慢了一步在代码的用户习惯的代价解决事件流问题。
微软公司设计了一套与冒泡事件相结合的新的事件系统。该行业用于调用IE事件处理，IE事件处理如下面的代码所示：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
btndom.attachevent（onclick
警报（单击我）！；
}）；
通过在IE浏览器的DOM元素的attachevent方法添加事件，和做事件处理，添加事件通过房地产进入的方法，所以我们需要添加事件的传输参数的方法，attachevent方法需要两个参数，第一个参数是事件类型、名称和在做的事件处理程序的事件称为第二个参数是事件功能的事件类型，利用优势的方法是，如果我们添加相同元素的单击事件，如下图所示：
复制代码代码如下所示：
btndom.attachevent（onclick
警报（单击我）！；
}）；
btndom.attachevent（onclick
警报（请单击我）！；
}）；
运行时，两个对话框可以正常播放，这样我们就可以为DOM元素添加许多不同的单击事件。如果我们没有事件怎么办我们该怎么做IE提供detachevent方法删除事件。参数列表是attachevent相同。如果我们想删除点击事件，我们只需传递和添加与事件相同的参数。
复制代码代码如下所示：
btndom.detachevent（onclick
警报（请单击我）！；
}）；
操作上，后果很严重，大家都很困惑，第二次点击没有被删除，这是什么我谈到了事件来添加删除传入和事件作为参数，但是在Javaｓｃｒｉｐｔ中的匿名函数和两个匿名函数中，即使代码完全相同，Javaｓｃｒｉｐｔ也会在内部存储中使用不同的变量，结果是我们看到的现象不能删除点击事件，所以我们应该编写这个代码：
复制代码代码如下所示：
VaR FTN =函数（）{（）
警报（请单击我）！；
}；
btndom.attachevent（onclick
btndom.detachevent（onclick
这种添加方法和删除方法指向同一个对象，所以事件删除是成功的。这里的场景告诉我们，编写操作函数应该独立定义而不作为匿名函数的事件是一个好习惯。
其次是DOM2事件处理，如图所示，其原理：
DOM2是一个标准的事件，使用DOM2事件，事件传递从第一次捕捉模式从文件，身体，div是一个中介，中介点当事件到事件在目标阶段，事件到目标阶段活动开始后泡沫最后在文件事件在结束。（起点和终点事件捕获，泡沫事件我本文所指向的文件，实际的情况是，有些浏览器会从窗口采集，开始冒泡，窗口结束但我认为不管如何浏览器本身的设置，当我们把焦点放在文档开发更多的发展意义，所以我都会使用文档在这里）。人们习惯于目标阶段作为本埠的一部分餐桌，主要是因为在发展泡沫的广泛使用。
的DOM2事件处理是非常令人沮丧的，每个事件的触发时间会把所有的元素遍历两倍，此即事件表现比较差，只有IE的泡沫，所以IE只需要遍历，但事件系统不遍历效率不代表IE高，从设计的角度出发，同时支持两个事件系统给我们开发带来更大的灵活性，从这一点来看仍然是非常可取的DOM2事件。为DOM2事件代码如下：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
BtnDOM.addEventListener（单击
警报（单击我）！；
}，假）；
VaR FTN =函数（）{（）
警报（请单击我）！；
}；
BtnDOM.addEventListener（单击
的DOM2事件处理使用addEventListener添加事件，它接收的IE事件超过三个参数，两参数的含义和IE的事件的第一两个相同的处理方法，唯一不同的是，除去前缀的第一个参数，第三个参数是一个布尔值，如果它的值是真的，那么事件捕获方式，值为false，事件是与泡沫的依据，有第三个参数，我们可以理解为什么DOM2事件处理单元通过事件运行两次，目的是为了兼容两事件模型，但这里要注意的是，无论我们选择捕获或泡沫，两次遍历是永远的，如果我们选择一个事件处理程序，然后另一个事件的过程不会触发任何事物一块功能是那辆汽车。通过对DOM2事件方法的设计，我们知道，在运行时的DOM2事件只能进行两种事件处理方法，不可能两事件流系统在同一时间触发，所以虽然元素遍历的两倍，但事件函数不能触发两次，我注意到，这里指的是没有触发两次指事件的功能，我们可以同时模拟执行流程模型，这两个事件例如，下面的代码：
复制代码代码如下所示：
BtnDOM.addEventListener（单击
BtnDOM.addEventListener（单击
但这是一个多事件处理，这相当于按钮的两次点击。
DOM2还提供了一个功能，删除事件，这是removeEventListener，写成如下：
复制代码代码如下所示：
BtnDOM.removeEventListener（单击
就像IE事件一样，参数应该与定义事件的参数一致。然而，当使用removeEventListener，第三个参数是不传输，默认是删除泡沫事件，因为第三参数传输，默认为false，例如：
复制代码代码如下所示：
BtnDOM.addEventListener（单击
BtnDOM.removeEventListener（单击
运行，并发现事件没有被删除。
最后，我想说的是，DOM2事件处理得到了很好的支持IE9，其中包括超过IE9和IE8不受DOM2事件支持。
然后我们比较三种方式，如下所示：
比较一：一是一党制，二是二党制。
一种方式是用HTML和javaｓｃｒｉｐｔ一起编写，相互连接，这种方式是加深HTML和javaｓｃｒｉｐｔ的混合开发，使用一个软件术语表达式是代码耦合，代码耦合不好，但不是很好，这是菜鸟程序员级，所以一个失败，其他两个模式胜利。
比较二：模式二和模式三
他们俩是相似的，有时真的很难说谁是好的或坏的，我们发现，上述内容的模式和模式三是最大的区别：21使用DOM元素的一个事件，只有一次，和三个DOM元素，可以让一个事件在这一事件中，有多个事件处理程序DOM2处理，三使我们可以准确地控制事件流，因此模式三的功能比两更强大，所以相对于三略更好的方式。
本文的重点是：事件系统的性能和解决性能问题的关键。在这里，我将从两个方面来考虑事件系统的性能问题：减少遍历次数和内存消耗。
一是事件捕获的遍历次数，流或事件气泡流，将遍历元素，但从顶层窗口或文档遍历开始，如果页面元素和DOM很深，然后遍历的元素更像DOM2事件处理、遍历的危害程度更大，如何解决这一事件流遍历的问题吗我的回答是否定的，这里的一些朋友可能有问题，怎么可能呢事件系统中有一个事件对象，事件，它有一个防止气泡或捕获事件的方法。我该怎么说我朋友的问题是很合理的，但是如果我们想使用这种方法来减少遍历，然后我们的代码来处理父子、爷孙元素之间的关系的要素之间的关系，如果页面元素嵌套很多，不这样做，所以我的答案是不改变遍历问题，只能去适应它。
看来，遍历减少未解决事件的系统的性能问题，现在只能从内存消耗。我常听人说C #好，因为它是Web前端开发的更好，我们可以拖动一个按钮的页面直接在C # IDE的按钮网页的Javaｓｃｒｉｐｔ代码后，自动为按钮添加一个事件，当然里面的事件函数是一个空函数，我想我们可以把100个按钮，在页面上这样的代码不会有100个按钮的事件处理，超方便，最后我们有一个按钮添加特定的按钮事件，使页面运行起来，我想问你这个页面的效率会高吗在Javaｓｃｒｉｐｔ中，每一个函数是一个对象，每个对象都会消耗内存，所以用99事件函数代码必须消耗大量宝贵的浏览器的记忆。当然，真正的发展环境，我们不这样做，但在当今流行的Ajax，单页面开发疯狂流行的时代，一个事件的网页超，这意味着我们每一个事件有一个事件的功能，但我们每次只会触发一个事件在这个时候其他事件都躺着睡觉，同时没有发挥作用，计算机的内存消耗。
我们需要一个解决方案来改变这种现状，在现实中有这样的一个解决方案。为了清楚地描述了计划，我想添加一些背景知识在事件处理关于DOM2我提到的对象的概念，抛开DOM2事件处理，捕获的事件处理和事件的处理也有泡沫目标对象的概念，对象是DOM元素事件的具体操作，如按钮点击按钮操作的对象，无论是事件处理、事件函数将包含一个事件对象，事件对象有一个属性，目标是指向目标对象，事件对象一个属性currentTarget，这个属性是指向DOM元素NT或泡沫流捕获事件。我们知道从上面的描述，无论是捕获的事件或泡沫事件，事件流会流到文档，如果再加上网页上的文档按钮点击事件不添加点击事件，我们点击文件按钮，我们知道的单击事件将触发，这里是一个详细的文档单击触发事件，指向事件目标按钮没有文件，然后我们可以写代码：
复制代码代码如下所示：
AA
Document.addEventListener（单击
VaR目标= evt.target；
开关（目标id）{
案例按钮：
警报（）；
打破；
案例AA：
警报（）；
打破；
}
}，假）；
运行时，我们发现效果与我们单独编写按钮事件相同，但其优点不言而喻。一个函数可以得到整个页面的事件函数，并且没有事件函数是空闲的，这是完美的。还有一个专业名称：事件委托。jQuery的委托方法就是根据这个原理做的。事实上，该事件的委托的效率不仅体现在功能降低，还可以减少DOM遍历操作，如上面的例子中我们添加文件的功能，文件的顶层对象页，看它的效率是很高的，由Dom向特定对象的属性操作事件的目标，但我们没有使用事件对象，所有这些只能用一句话概括：没有理由是真的很快，快。
本次活动还委托给我们带来伟大的副产品，使用jQuery的朋友应该用活的方法，活的方法，你可以添加页面元素的事件，即使在网页中的元素不存在，你也可以将它添加到事件，了解事件委托机制、生活原则很容易理解，事实上，生活是jQuery事件委托做的，同时，生活也要添加事件的一种有效方法。
了解事件的委托，我们会发现，绑定的方法是一种低效率的jQuery的方法，因为它使用的事件的原始定义，所以结合我们应该谨慎使用，其实jQuery的开发商都意识到这一问题，对jQuery的新版本有一个方法，在方法上，活委托包含绑定方法的所有功能，所以我推荐看朋友放弃使用前添加事件，使用功能添加事件。
事件委托还有另一个优点。在上述情况下，我将事件添加到事件委托的文档中。在这里，我想做一个比较。在jQuery中，我们用现成的方法定义了DOM元素事件的定义。
复制代码代码如下所示：
$（文档）Ready（函数（）{）
XXX.bind（点击），功能（{ }）；
}）；
准备功能是在DOM加载网页文件的执行，它是第一个实现onload函数，提前的好处很多，其中一个好处是带来的性能改进，jQuery事件的定义是一个标准的做法，我相信一定会有一些朋友一些事件的准备外结合，终于找到这个按钮是无效的。无效的场景有时一会儿就好了，所以我们经常忽视问题的原则，不在准备功能绑定，这个操作是绑定在DOM加载事件，而这一次，可能在页面结构的一些元素是不好的，这样的事件将是无效的，所以该事件的准备定义是确保页面中所有的真相的元素加载在事件的DOM元素的定义，但事件delegateyou可以避免的问题，如文件绑定事件，对整个页面代表的文档，所以它加载的时间最早，所以在文档的事件委托，它难事件无效，很难发生在XXX浏览器定义的函数的问题。总结这一特征：事件委托代码可以在页面加载的任何阶段运行，这将给开发人员更多的自由来提高Web性能或增强网页效果。
好吧，这篇文章是写的。晚安。
Javaｓｃｒｉｐｔ中的事件系统是我曾经想到的第一个突破，为什么是Javaｓｃｒｉｐｔ事件系统我们都知道Web前端包含三种技术：HTML、CSS和Javaｓｃｒｉｐｔ。如何结合HTML和CSS是非常清楚的：样式、类、ID和HTML标记。这是不容易的，但它是如何进入HTML的中间和三者的融合我终于找到了事件系统的出发点是Javaｓｃｒｉｐｔ，不管我们如何写复杂的Javaｓｃｒｉｐｔ代码，最终体现在HTML和CSS的事件，通过该系统，所以我想既然事件系统是三个整合的起点，然后一个页面，尤其是必须有一大批事件操作的今天日益复杂的网页，而这些事件我们精心准备的Javaｓｃｒｉｐｔ代码只有冰释前嫌，没用的。因为在页面上有很多事件的功能，我们可以有一个问题，影响效率，根据习惯写事件的功能我所研究的答案是一个真正的效率问题，这是一个严重的效率问题。
为了澄清我的答案，我想详细地解释Javaｓｃｒｉｐｔ事件系统。
事件系统是Javaｓｃｒｉｐｔ、HTML和CSS集成的切入点。这个切入点是在java的主要功能。所有的魔法都是从这里开始的。那么浏览器是如何做到这一点的呢我学习的方法有3种。他们是:
方式一：HTML事件处理
HTML事件处理是直接在HTML标签中编写事件函数，因为它与HTML标签紧密耦合，因此称为HTML事件处理：
复制代码代码如下所示：
U3000 U3000
如果单击事件函数复杂，编写代码会不方便。所以我们经常写函数在调用函数的名字，和我直接，例如：
复制代码代码如下所示：
功能btnclk（）{
警报（单击我）！；
}
该方法是一种非常优美的文字，现在很多人仍然不自觉地使用它，但也许很多人不知道，在一个风格不一的方法的鲁棒性，这是我最近在非阻塞加载脚本技术时遇到的问题的研究，因为根据前端优化Javaｓｃｒｉｐｔ代码的原理通常位于页面底部的页面已经在HTML标签脚本参考功能受阻，不能执行的时候，我们单击页面按钮，将提供XXX函数未定义的错误在Javaｓｃｒｉｐｔ中，错误会被抓，尝试。因此，为了使代码更健壮，我们将进行以下重写：
复制代码代码如下所示：
U3000 U3000
看到上面的代码是恶心，可以描述。
模式二：dom0级事件处理
做水平事件处理是所有的浏览器都支持事件处理。没有兼容性问题。它将使每一个Web前端兴奋，dom0事件处理的规则是：每一个DOM元素都有自己的事件处理属性，可以指定一个函数，如下面的代码：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
btndom.onclick =函数（）{
警报（单击我）！；
}
事件属性的水平做事件处理中定义的方法的名称+事件，而整个属性是一个小写字母。我们知道DOM元素是Javaｓｃｒｉｐｔ代码的Javaｓｃｒｉｐｔ对象，例如它是理解水平做事件处理的Javaｓｃｒｉｐｔ对象，角度很容易的，下面的代码：
复制代码代码如下所示：
btndom.onclick = null；
然后按钮的单击事件被取消。
再看下面的代码：
复制代码代码如下所示：
btndom.onclick =函数（）{
警报（单击我）！；
}
btndom.onclick =函数（）{
警报（点击me1111！；
}
下一个函数将覆盖第一个函数。
模式三：DOM2事件处理和IE的事件处理
DOM2事件处理是一个标准化的事件处理方案，但IE浏览器做了一组功能类似DOM2事件处理，但代码是不相同的。
在解释三的方法之前，我必须添加一些概念，否则我就不能说出第三条的含义。
第一个概念是事件的流程。
在页面开发中我们常常遇到这样的情况，一个页面的工作范围可以在文档在Javaｓｃｒｉｐｔ中表达，一个div页面，DIV覆盖文档中的元素，div里面的一个按钮元件，按钮元件覆盖div，也被覆盖的文件，那么问题是，当我们点击这个按钮，在行为不仅点击按钮，DIV和文档的点击操作，根据这三个要素的逻辑可能会触发单击事件，和事件流是场景的概念描述，意思是：从活动页面接收事件订单流程。
第二个概念：事件泡沫和事件捕获
事件冒泡是微软公司解决事件流问题的一种解决方案，事件捕获是由Netscape公司提出的事件流解决方案。
泡沫事件开始的div，然后身体，最后文件，事件捕捉倒挂的头文件，然后身体，相比之下，最后的目标元素div，微软公司方案更加人性化，符合人们的操作习惯，程序是Netscape非常尴尬，这是网景的浏览器大战结果，慢了一步在代码的用户习惯的代价解决事件流问题。
微软公司设计了一套与冒泡事件相结合的新的事件系统。该行业用于调用IE事件处理，IE事件处理如下面的代码所示：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
btndom.attachevent（onclick
警报（单击我）！；
}）；
通过在IE浏览器的DOM元素的attachevent方法添加事件，和做事件处理，添加事件通过房地产进入的方法，所以我们需要添加事件的传输参数的方法，attachevent方法需要两个参数，第一个参数是事件类型、名称和在做的事件处理程序的事件称为第二个参数是事件功能的事件类型，利用优势的方法是，如果我们添加相同元素的单击事件，如下图所示：
复制代码代码如下所示：
btndom.attachevent（onclick
警报（单击我）！；
}）；
btndom.attachevent（onclick
警报（请单击我）！；
}）；
运行时，两个对话框可以正常播放，这样我们就可以为DOM元素添加许多不同的单击事件。如果我们没有事件怎么办我们该怎么做IE提供detachevent方法删除事件。参数列表是attachevent相同。如果我们想删除点击事件，我们只需传递和添加与事件相同的参数。
复制代码代码如下所示：
btndom.detachevent（onclick
警报（请单击我）！；
}）；
操作上，后果很严重，大家都很困惑，第二次点击没有被删除，这是什么我谈到了事件来添加删除传入和事件作为参数，但是在Javaｓｃｒｉｐｔ中的匿名函数和两个匿名函数中，即使代码完全相同，Javaｓｃｒｉｐｔ也会在内部存储中使用不同的变量，结果是我们看到的现象不能删除点击事件，所以我们应该编写这个代码：
复制代码代码如下所示：
VaR FTN =函数（）{（）
警报（请单击我）！；
}；
btndom.attachevent（onclick
btndom.detachevent（onclick
这种添加方法和删除方法指向同一个对象，所以事件删除是成功的。这里的场景告诉我们，编写操作函数应该独立定义而不作为匿名函数的事件是一个好习惯。
其次是DOM2事件处理，如图所示，其原理：
DOM2是一个标准的事件，使用DOM2事件，事件传递从第一次捕捉模式从文件，身体，div是一个中介，中介点当事件到事件在目标阶段，事件到目标阶段活动开始后泡沫最后在文件事件在结束。（起点和终点事件捕获，泡沫事件我本文所指向的文件，实际的情况是，有些浏览器会从窗口采集，开始冒泡，窗口结束但我认为不管如何浏览器本身的设置，当我们把焦点放在文档开发更多的发展意义，所以我都会使用文档在这里）。人们习惯于目标阶段作为本埠的一部分餐桌，主要是因为在发展泡沫的广泛使用。
的DOM2事件处理是非常令人沮丧的，每个事件的触发时间会把所有的元素遍历两倍，此即事件表现比较差，只有IE的泡沫，所以IE只需要遍历，但事件系统不遍历效率不代表IE高，从设计的角度出发，同时支持两个事件系统给我们开发带来更大的灵活性，从这一点来看仍然是非常可取的DOM2事件。为DOM2事件代码如下：
复制代码代码如下所示：
无功btndom = document.getelementbyid（按钮）；
BtnDOM.addEventListener（单击
警报（单击我）！；
}，假）；
VaR FTN =函数（）{（）
警报（请单击我）！；
}；
BtnDOM.addEventListener（单击
的DOM2事件处理使用addEventListener添加事件，它接收的IE事件超过三个参数，两参数的含义和IE的事件的第一两个相同的处理方法，唯一不同的是，除去前缀的第一个参数，第三个参数是一个布尔值，如果它的值是真的，那么事件捕获方式，值为false，事件是与泡沫的依据，有第三个参数，我们可以理解为什么DOM2事件处理单元通过事件运行两次，目的是为了兼容两事件模型，但这里要注意的是，无论我们选择捕获或泡沫，两次遍历是永远的，如果我们选择一个事件处理程序，然后另一个事件的过程不会触发任何事物一块功能是那辆汽车。通过对DOM2事件方法的设计，我们知道，在运行时的DOM2事件只能进行两种事件处理方法，不可能两事件流系统在同一时间触发，所以虽然元素遍历的两倍，但事件函数不能触发两次，我注意到，这里指的是没有触发两次指事件的功能，我们可以同时模拟执行流程模型，这两个事件例如，下面的代码：
复制代码代码如下所示：
BtnDOM.addEventListener（单击
BtnDOM.addEventListener（单击
但这是一个多事件处理，这相当于按钮的两次点击。
DOM2还提供了一个功能，删除事件，这是removeEventListener，写成如下：
复制代码代码如下所示：
BtnDOM.removeEventListener（单击
就像IE事件一样，参数应该与定义事件的参数一致。然而，当使用removeEventListener，第三个参数是不传输，默认是删除泡沫事件，因为第三参数传输，默认为false，例如：
复制代码代码如下所示：
BtnDOM.addEventListener（单击
BtnDOM.removeEventListener（单击
运行，并发现事件没有被删除。
最后，我想说的是，DOM2事件处理得到了很好的支持IE9，其中包括超过IE9和IE8不受DOM2事件支持。
然后我们比较三种方式，如下所示：
比较一：一是一党制，二是二党制。
一种方式是用HTML和javaｓｃｒｉｐｔ一起编写，相互连接，这种方式是加深HTML和javaｓｃｒｉｐｔ的混合开发，使用一个软件术语表达式是代码耦合，代码耦合不好，但不是很好，这是菜鸟程序员级，所以一个失败，其他两个模式胜利。
比较二：模式二和模式三
他们俩是相似的，有时真的很难说谁是好的或坏的，我们发现，上述内容的模式和模式三是最大的区别：21使用DOM元素的一个事件，只有一次，和三个DOM元素，可以让一个事件在这一事件中，有多个事件处理程序DOM2处理，三使我们可以准确地控制事件流，因此模式三的功能比两更强大，所以相对于三略更好的方式。
本文的重点是：事件系统的性能和解决性能问题的关键。在这里，我将从两个方面来考虑事件系统的性能问题：减少遍历次数和内存消耗。
一是事件捕获的遍历次数，流或事件气泡流，将遍历元素，但从顶层窗口或文档遍历开始，如果页面元素和DOM很深，然后遍历的元素更像DOM2事件处理、遍历的危害程度更大，如何解决这一事件流遍历的问题吗我的回答是否定的，这里的一些朋友可能有问题，怎么可能呢事件系统中有一个事件对象，事件，它有一个防止气泡或捕获事件的方法。我该怎么说我朋友的问题是很合理的，但是如果我们想使用这种方法来减少遍历，然后我们的代码来处理父子、爷孙元素之间的关系的要素之间的关系，如果页面元素嵌套很多，不这样做，所以我的答案是不改变遍历问题，只能去适应它。
看来，遍历减少未解决事件的系统的性能问题，现在只能从内存消耗。我常听人说C #好，因为它是Web前端开发的更好，我们可以拖动一个按钮的页面直接在C # IDE的按钮网页的Javaｓｃｒｉｐｔ代码后，自动为按钮添加一个事件，当然里面的事件函数是一个空函数，我想我们可以把100个按钮，在页面上这样的代码不会有100个按钮的事件处理，超方便，最后我们有一个按钮添加特定的按钮事件，使页面运行起来，我想问你这个页面的效率会高吗在Javaｓｃｒｉｐｔ中，每一个函数是一个对象，每个对象都会消耗内存，所以用99事件函数代码必须消耗大量宝贵的浏览器的记忆。当然，真正的发展环境，我们不这样做，但在当今流行的Ajax，单页面开发疯狂流行的时代，一个事件的网页超，这意味着我们每一个事件有一个事件的功能，但我们每次只会触发一个事件在这个时候其他事件都躺着睡觉，同时没有发挥作用，计算机的内存消耗。
我们需要一个解决方案来改变这种现状，在现实中有这样的一个解决方案。为了清楚地描述了计划，我想添加一些背景知识在事件处理关于DOM2我提到的对象的概念，抛开DOM2事件处理，捕获的事件处理和事件的处理也有泡沫目标对象的概念，对象是DOM元素事件的具体操作，如按钮点击按钮操作的对象，无论是事件处理、事件函数将包含一个事件对象，事件对象有一个属性，目标是指向目标对象，事件对象一个属性currentTarget，这个属性是指向DOM元素NT或泡沫流捕获事件。我们知道从上面的描述，无论是捕获的事件或泡沫事件，事件流会流到文档，如果再加上网页上的文档按钮点击事件不添加点击事件，我们点击文件按钮，我们知道的单击事件将触发，这里是一个详细的文档单击触发事件，指向事件目标按钮没有文件，然后我们可以写代码：
复制代码代码如下所示：
AA
Document.addEventListener（单击
VaR目标= evt.target；
开关（目标id）{
案例按钮：
警报（）；
打破；
案例AA：
警报（）；
打破；
}
}，假）；
运行时，我们发现效果与我们单独编写按钮事件相同，但其优点不言而喻。一个函数可以得到整个页面的事件函数，并且没有事件函数是空闲的，这是完美的。还有一个专业名称：事件委托。jQuery的委托方法就是根据这个原理做的。事实上，该事件的委托的效率不仅体现在功能降低，还可以减少DOM遍历操作，如上面的例子中我们添加文件的功能，文件的顶层对象页，看它的效率是很高的，由Dom向特定对象的属性操作事件的目标，但我们没有使用事件对象，所有这些只能用一句话概括：没有理由是真的很快，快。
本次活动还委托给我们带来伟大的副产品，使用jQuery的朋友应该用活的方法，活的方法，你可以添加页面元素的事件，即使在网页中的元素不存在，你也可以将它添加到事件，了解事件委托机制、生活原则很容易理解，事实上，生活是jQuery事件委托做的，同时，生活也要添加事件的一种有效方法。
了解事件的委托，我们会发现，绑定的方法是一种低效率的jQuery的方法，因为它使用的事件的原始定义，所以结合我们应该谨慎使用，其实jQuery的开发商都意识到这一问题，对jQuery的新版本有一个方法，在方法上，活委托包含绑定方法的所有功能，所以我推荐看朋友放弃使用前添加事件，使用功能添加事件。
事件委托还有另一个优点。在上述情况下，我将事件添加到事件委托的文档中。在这里，我想做一个比较。在jQuery中，我们用现成的方法定义了DOM元素事件的定义。
复制代码代码如下所示：
$（文档）Ready（函数（）{）
XXX.bind（点击），功能（{ }）；
}）；
准备功能是在DOM加载网页文件的执行，它是第一个实现onload函数，提前的好处很多，其中一个好处是带来的性能改进，jQuery事件的定义是一个标准的做法，我相信一定会有一些朋友一些事件的准备外结合，终于找到这个按钮是无效的。无效的场景有时一会儿就好了，所以我们经常忽视问题的原则，不在准备功能绑定，这个操作是绑定在DOM加载事件，而这一次，可能在页面结构的一些元素是不好的，这样的事件将是无效的，所以该事件的准备定义是确保页面中所有的真相的元素加载在事件的DOM元素的定义，但事件delegateyou可以避免的问题，如文件绑定事件，对整个页面代表的文档，所以它加载的时间最早，所以在文档的事件委托，它难事件无效，很难发生在XXX浏览器定义的函数的问题。总结这一特征：事件委托代码可以在页面加载的任何阶段运行，这将给开发人员更多的自由来提高Web性能或增强网页效果。
好吧，这篇文章是写的。晚安。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。