美文网首页
事件委托

事件委托

作者: Ra_b7df | 来源:发表于2018-10-07 16:05 被阅读0次

        当我们遇到给一组元素加相同的事件,常常用到循环,看似语句很少,感觉性能提高,其实不然,运用循环,还是执行了一组元素的长度次数的代码,所有在遇到给一组元素加相同的事件的时候,我们可以运用事件委托的方法,大大的提高了代码执行的性能。

        事件委托的思路:

                1.把事件加给父级:

                        事件触发时,找触发事件的事件源

                        语句:ev.target  兼容高级浏览器

                                   ev.srcElement 兼容非火狐

                                    考虑到浏览器兼容问题: var oSrc=ev.target||ev.srcElement

                2.判断事件的源头是不是我们想要的元素

                        语句:.tagName

                                  .nodeName

                                  .className

    事件委托本质:是通过事件冒泡来实现

    具体例子如下:

    让一堆元素点击变色:有一组相同的元素,设置好宽高,背景颜色,依次点击让它们变成红色

    代码如下图:

    HTML部分:

    css部分:

    js部分:

    相关文章

      网友评论

          本文标题:事件委托

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