JavaScript高级程序设计之事件

当用户按下某个按钮是,就会触发对应事件,事件在执行注册事件时,绑定的程序,实现一次成功的浏览器与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上绑有事件,移出节点时,事件是不会解绑的,必须要手动解绑。但是在删除节点时,工程师们往往不会去手动解绑事件,这就造成了,元素被删除了,事件的引用还在内存中,长此下去,性能上就会出现问题。

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

posted on 2018-11-02 11:48  木森焱  阅读(194)  评论(0编辑  收藏  举报

导航