js事件委托

最新推荐文章于 2024-11-04 09:11:09 发布

_处女座程序员的日常

最新推荐文章于 2024-11-04 09:11:09 发布

阅读量120

点赞数 1

分类专栏： vue 函数执行数组去重文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_42931285/article/details/120295525

版权

vue 同时被 3 个专栏收录

210 篇文章 4 订阅

订阅专栏

函数执行

3 篇文章 0 订阅

订阅专栏

数组去重

2 篇文章 0 订阅

订阅专栏

先说事件冒泡：自底向上
事件捕获：自顶向下
注：以上均指的是从结构上讲的。

简介：事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父
元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判
断事件发生元素 DOM 的类型，来做出不同的响应。
举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委
托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发
机制。

案例：通过给ul绑定事件就可以，其中li可以动态的增加。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        let ul = document.querySelector("ul");
        ul.onclick =e=>
        console.log(e.target.innerText);
    </sc