JavaScript高级程序设计之事件

Posted 2021-01-16 木森焱

当用户按下某个按钮是，就会触发对应事件，事件在执行注册事件时，绑定的程序，实现一次成功的浏览器与JS之间的交互。其中事件基于设计模式中的观察者模式原理实现，但又有些不同，事件它还拥有着一些属于自己的特点。

事件流

　　事件冒泡是IE的产物，它的流向，是自下向上，从绑定事件的具体元素开始，一直流到具体元素的最顶级元素。

　　事件捕获是网景的产物，它的流向与事件冒泡正好相反，是自上向下的，从绑定时间的具体元素的顶级元素开始，一直流到绑定事件的具体元素。目前主流的浏览器既至此冒泡又支持捕获，不过一般冒泡就能满足需求。

事件处理

　　html事件处理通过在HTML标签上边添加对应的事件属性，并把值设为要执行的代码或函数。例:<a href="javascript:void;" onclick = "aa(this,event)" ></a>。此例中，onclick是事件属性，表示事件为点击事件。aa是事件触发时，要执行的函数。this指向的是a标签的节点对象，event指向的是事件对象。这种事件的处理方式，有个很有意思的地方，你可以使用局部变量的方式，去使用document和元素本身的成员。

　　Dom0级事件处理通过元素节点对象本身的事件属性来绑定事件。例：document.onclick = function(){};此例中，onclick是document对象的属性，它的默认值是null，当需要绑定事件时，把需要触发的函数作为值赋给它，而当需要解除绑定时，把其值再设为null就可以。这种方式使用起来很方便，而且做到了，js与HTML的解耦，不过此方式只能绑定一次事件，无法绑定多个事件。

　　Dom2级事件处理通过提供的API来进行事件的绑定与解绑。一共两个方法，一个是addEventListener(),另一个是removeEventListener()。前者用于绑定事件，接收三个参数，第一个事件名，第二个事件处理函数，第三个可选表示在什么时候开始执行事件处理程序，true为捕获阶段，false为冒泡阶段。后者用于解绑事件，参数和前者的方法相同,也就是说，如果传入的函数不同，是无法取消事件的，也就是说，用匿名函数绑定的事件，是无法被取消的。这种方式，可以给元素绑定多个事件，并且触发事件时，会按顺序依次触发绑定的事件。

内存和性能

在DOM编程中，通常会因为实现某个功能而删除DOM节点。若是DOM上绑有事件，移出节点时，事件是不会解绑的，必须要手动解绑。但是在删除节点时，工程师们往往不会去手动解绑事件，这就造成了，元素被删除了，事件的引用还在内存中，长此下去，性能上就会出现问题。

事件委托用于解决事件绑定存在的性能问题。其原理利用了事件冒泡的特性，绑定事件时，给元素的父级绑定事件，而不直接绑定到子元素上，然后通过判断来判断触发事件的是不是子元素，然后在执行具体代码。