事件委托

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

    事件委托的思路:

            1.把事件加给父级:

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

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

                               ev.srcElement 兼容非火狐

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

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

                    语句:.tagName

                              .nodeName

                              .className

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

具体例子如下:

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

代码如下图:

HTML部分:

事件委托_第1张图片

css部分:

事件委托_第2张图片

js部分:

事件委托_第3张图片

你可能感兴趣的:(事件委托)