码迷,mamicode.com
首页 > Web开发 > 详细

js实现事件委派

时间:2020-03-21 17:48:23      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:class   dde   等于   对象   target   function   listen   col   tps   

事件委派

事件委派,通俗的说就是将元素的事件委托给它的父级或者更外级的元素处理,它的实现机制就是事件冒泡。

        // 使用函数封装事件委派功能
        //第一个参数是被事件委派元素也就是(事件委派者的父元素)
        //第二个参数是事件的类型比如‘click‘事件
        //第三参数是事件委派者元素的选择器
        //第四个参数是事件执行函数
        function delegate(element, eventType, selector, fn) {
            // 给被事件委派元素注册事件
            element.addEventListener(eventType, e => {
                //获取到触发这个事件的元素对象
                let el = e.target;
                //使用循环去判断el元素是不是选择器元素
                //如果el不是选择器元素则将el的上一级父元素赋值给el
                //直到el的父元素是选择器类型的元素或el的父元素到达事件边界也就是到达element元素的时候结束循环
                while (!el.matches(selector)) {
                    // el等于element元素,代表触发事件的元素不是事件委派者元素
                    if (element === el) {
                       el = null;
                       break;
                    }
                    el = el.parentNode;
                }
                //如果el=null,则未在事件委派者元素上触发事件,则不执行事件函数
                //否则使用函数原型上的call方法执行事件函数,
                //使用call的形式执行可以使事件函数参数更灵活的设置
                el && fn.call(el, e, el)
            });
            //返回被事件委派元素对象,也可以不返回;
            return element
        }

以上内容的编写参考自:https://juejin.im/post/5e739534e51d4526f23a4150

js实现事件委派

标签:class   dde   等于   对象   target   function   listen   col   tps   

原文地址:https://www.cnblogs.com/denghaopositive/p/12540522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!