美文网首页
事件代理实现

事件代理实现

作者: zh_yang | 来源:发表于2017-09-15 14:57 被阅读0次

    1、事件传播机制、阻止传播、取消默认事件、事件代理

    (1)事件传播机制

    当事件发生在某个文档节点上时(即事件目标),目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。

    • 2级DOM的事件传播包含三个阶段:
      捕捉阶段(capturing),事件从顶级文档树节点一级一级向下遍历,直到到达该事件的目标节点。
      到达事件的目标节点,执行目标节点的时间处理程序。
      事件起泡(bubbling),事件从目标节点一级一级向上上溯,直到顶级文档树节点。
    • 相应的,2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
      addEventListener(eventType, handler, propagate);
      removeEventListener(eventType, handler, propagate);
      三个参数意思分别如下:
      eventType: 即事件类型(不加on)。比如:"click"。
      handler: 事件处理函数。传入参数即为事件对象event。
      propagate: 是否只执行捕获和目标节点两个阶段。true的话,只执行1,2两个阶段;false的话,只指向2,3两个阶段。
    • IE的事件传播只包含上边的2和3两个阶段
      相应的,IE通过下面两个函数给节点对象添加和删除事件处理函数。
      attachEvent(eventType, handler);
      detachEvent(eventType, handler);
      参数意思同2级DOM对应的函数参数

    (2)阻止传播,取消默认事件

    • DOM浏览器
      阻止冒泡e.stopPropagation();
      阻止默认事件event.preventDefault()
    • IE浏览器
      阻止冒泡e.cancelBubble = true;
      阻止默认事件event.returnValue = false;
    • 使用 onmouseenter、onmouseleave等事件默认阻止冒泡

    (3)事件代理

    • 事件代理就是:当网页中需要触发事件的对象比较多的时候,为了避免内存泄漏,我们把事件委托到其父对象上,借助事件冒泡机制,可以将事件委托到body,document等元素上,这样等于一个页面就只有一个事件触发,避免直接把事件添加到多个对象上。
    • 事件代理是利用事件的冒泡原理来实现的,就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件代理,委托它们父级代为执行事件。

    2、演示事件传播的过程,演示阻止传播的效果

    • IE事件传播,即事件冒泡,由内而外依次传播
      如下图点击' .child '时输出的结果
    测试01.png

    在' .patent '上添加阻止冒泡,结果如下:

    测试02.png

    代码:http://js.jirengu.com/kikec/2/edit?html,js,console,output

    • DOM2事件传播,即事件先捕获、再冒泡
      如下图点击' .child '时输出的结果
    测试03.png

    在' .patent '上添加阻止冒泡,结果如下:

    测试04.png

    在' .patent '上添加阻止捕获,结果如下:

    测试05.png
    代码:http://js.jirengu.com/bimat/1/edit?html,js,console,output

    3、实现如下页面:http://book.jirengu.com/fe/code/projects/HungoouRadio/login.html

    1.不用事件代理实现的,代码比较多:http://js.jirengu.com/kotep
    2.抽空再用事件代理做一遍:

    相关文章

      网友评论

          本文标题:事件代理实现

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