Front-end-learning-to-organize-notes icon indicating copy to clipboard operation
Front-end-learning-to-organize-notes copied to clipboard

事件委托,详细讲

Open Chocolate1999 opened this issue 4 years ago • 1 comments

Chocolate1999 avatar Jan 21 '21 09:01 Chocolate1999

“过多事件处理程序”的解决方案是使用事件委托。事件委托利用事件冒泡,可以只使用一个事件处理程序来管理一种类型的事件。例如, click 事件冒泡到 document 。这意味着可以为整个页面指定一个 onclick 事件处理程序,而不用为每个可点击元素分别指定事件处理程序。 优点:

  • document 对象随时可用,任何时候都可以给它添加事件处理程序(不用等待 DOMContentLoaded或 load 事件)。这意味着只要页面渲染出可点击的元素,就可以无延迟地起作用。
  • 节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省 DOM引用,也可以节省时间。
  • 减少整个页面所需的内存,提升整体性能。

最适合使用事件委托的事件包括: click 、 mousedown 、 mouseup 、 keydown 和 keypress 。mouseover 和 mouseout 事件冒泡,但很难适当处理,且经常需要计算元素位置(因为 mouseout 会在光标从一个元素移动到它的一个后代节点以及移出元素之外时触发)。

HearLing avatar Jan 22 '21 09:01 HearLing