美文网首页
js事件委托(事件代理)

js事件委托(事件代理)

作者: A郑家庆 | 来源:发表于2018-12-29 11:57 被阅读0次

    定义:
    事件委托就是在DOM事件的冒泡阶段,把具体dom上发生的事件委托给父元素或祖先元素去处理。
    原理:
    要了解委托的原理,首先要理解DOM事件的过程。
    DOM事件分为三个阶段,如图

    1546055801018.jpg
    1.事件捕获阶段(红色箭头顺序)
    2.事件冒泡阶段(绿色箭头顺序)
    3.事件目标阶段(蓝色DOM)
    事件捕获阶段,事件源依次从defaultView(可以理解为整个页面document),一直传播到具体的目标(点击目标target),从面到点。
    在事件冒泡阶段,事件源依次从target传播到defaultView,范围越来越大,像冒泡一样,气泡越来越大,从点到面。

    事件目标阶段就是点击的那个点。

    注意:冒泡只会冒泡到父级元素不会冒泡到相邻元素。

    优点:
    1.提高性能:每一个函数都会占用内存空间,现在只需添加一个事件处理程序代理所有事件,所占用的内存空间更小,可以大大减少dom操作。
    2.事件委托可以处理新增的dom元素。

    Event对象提供了一个属性叫target,可以返回事件的目标节点,利用这个属性就可以给特定的dom添加事件。
    适合事件委托的事件:click、mouseover、mouseout、mousedown、mouseup、keydown、keyup、keypress。

    相关文章

      网友评论

          本文标题:js事件委托(事件代理)

          本文链接:https://www.haomeiwen.com/subject/dtyulqtx.html