DOM事件模型和事件委托

最新推荐文章于 2023-07-13 11:46:30 发布

骑鱼的少年

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量186

点赞数

分类专栏：大前端文章标签： javascript DOM事件

本文链接：https://blog.csdn.net/qq_21918903/article/details/109388900

版权

大前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

此文章主要作用是记录看到的琐碎知识

事件模型图

常用的监听事件addEventLister

btn.addEventListener = ('click', function(){}, false)
btn.addEventListener = ('click', function(){}, true)

addEventListener(事件名，回调函数，布尔值)，第三个参数是来指定事件是否在捕获阶段或冒泡阶段执行（默认为false，在冒泡阶段执行事件的回调函数）。

事件委托（事件代理）

事件委托又叫事件代理：利用事件冒泡模型，不监听子节点，而去监听其父节点，由父节点监听函数统一处理多个子节点的事件。

<body>
    <div id="div">
        <button>点击</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        function on(eventType, element, selector, fn) {
            if (!(element instanceof Element)) {
                element = document.querySelector(element)
            }
            element.addEventListener(eventType, (e) => {
                const t = e.target
                if (t.matches(selector)) {
                    fn(e)
                }
            })
        }
        on('click', '#div', 'button', () => {
            console.log('button被点击了')
        })

        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            let tagName = e.target.tagName.toLowerCase()
            if (tagName === 'li') {
                //some code
                console.log('li被点击了')
            }
        })
    </script>
</body>

参考：

DOM事件模型和事件委托

常见事件与DOM事件模型

骑鱼的少年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM事件模型和事件委托

此文章主要作用是记录看到的琐碎知识事件模型图常用的监听事件addEventListerbtn.addEventListener = ('click', function(){}, false)btn.addEventListener = ('click', function(){}, true)addEventListener(事件名，回调函数，布尔值)，第三个参数是来指定事件是否在捕获阶段或冒泡阶段执行（默认为false，在冒泡阶段执行事件的回调函数）。事件委托（事件代理）事件委托.
复制链接

扫一扫