zoukankan      html  css  js  c++  java
  • 事件委托

    事件委托

    首先,有两个问题
    问题一:
    有一个瀑布流布局,上面有数以千计的图片,当点击某一张图片的时候就预览该张图片,你会怎么添加点击事件?
    问题二:
    如果有个业务让你监听目前不存在的元素的点击事件,这个时候该怎么做?

    针对问题一,可以监听所有图片的祖先元素,等冒泡的时候判断target是不是这些张图片的某一张
    针对问题二,先监听祖先,等点击的时候看看是不是我想要的监听元素即可

    这样,事件委托的优点就显而易见了

    1. 可以节省监听数目,节省了内存。
    2. 可以监听动态元素

    封装一个事件委托

        function on(eventType, element, selector, fn) {
            // 判断element是不是Element的实例
            // 如果不是,是字符串的话,先获取到该元素
            if (!(element instanceof Element)) {
                element = document.querySelector(element)
            }
            // 给元素监听事件
            element.addEventListener(eventType, (e) => {
                // 获取到用户操作的目标元素
                let el = e.target
                // 判断el是不是满足selector
                while (!el.matches(selector)) {
                    // 如果el最终找到了用于委托的元素element,则中断寻找.因为找到头了
                    if (element === el) {
                        el = null
                        break
                    }
                    // 如果el不满足selector,则向上找
                    el = el.parentNode
                }
                // el满足selector, 执行fn
                el && fn.call(el, e, el)
    
            })
        }
    

    JS支持事件吗

    不支持,JS只是调用了DOM提供的addEventListener而已

  • 相关阅读:
    开门(open_door_pick_demo.py)的学习教程(十一)
    Bert源码解读(二)
    Transformer和Bert 的学习(一)
    Android笔记
    JSP 第八周课后作业
    JSPd第七周课后作业 2021/04/14
    JSP第六次课后作业 2021/04/07
    JSP第五次课后作业 2021/03/31
    JSP第四次课后作业 2021/03/24
    JSP第二次课后作业 2021/03/10
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14128644.html
Copyright © 2011-2022 走看看