JavaScript 事件——“内存和性能”的注意要点

  • A+
所属分类:JavaScript

 

事件委托

对“事件处理程序过多”的问题的解决方案就是事件委托。例如,click事件会一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。如下面的代码:

添加事件处理程序:

这样写会有数不清的代码用于添加事件处理程序,但如果利用事件委托技术,就可以用比较少的代码解决这个问题:

这样就轻松加愉快的解决问题了。

另外,如果可行的话,可以考虑为document对象添加一个事件处理程序,用以处理页面上发声的某种特定的事件。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

移除事件处理程序

通常造成空事件处理程序的原因有可能是DOM操作(removeChild()等)、或使用innerHTML等。如:

在div元素中设置innerHTML可以把按钮移走,但事件处理程序依然与按钮保持引用关系,所以最好设置成如下:

在事件处理程序中删除按钮也能阻止事件冒泡

另外,在页面卸载之前,也应该通过onunload事件处理程序移除所有事件处理程序。以防止部分浏览器出现内存问题。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: