快速理解事件委托？

最新推荐文章于 2023-01-20 21:04:53 发布

渣渣砖

最新推荐文章于 2023-01-20 21:04:53 发布

阅读量129

点赞数

分类专栏： Javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/W2457307263/article/details/113885064

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。

如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid red;
        }
        tr{
            /* position: relative; */
            width: 300px;
            height: 60px;
            /* background: grey; */
            border: 1px solid blue;
        }
        td{
            width: 60px;
            height: 60px;
            border: 1px solid red;
            
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
           
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            
        </tr>
    </table>
    
</body>
</html>

代码实现的表格有 9 个单元格（cell），也可以有 99 个或 9999 个单元格，这都不重要。

我们的任务是在点击时高亮显示被点击的单元格 <td>。

与其为每个 <td>（可能有很多）分配一个 onclick 处理程序 —— 我们可以在 <table> 元素上设置一个“捕获所有”的处理程序。

它将使用 event.target 来获取点击的元素并高亮显示它。

<script>
        var oTr = document.querySelectorAll('table');
        console.log(oTr);
        
        oTr[0].addEventListener('click',function(e){
            if(e.target.style.background) {e.target.style.background = '';}
            else{
                e.target.style.background = 'black';
            }   
        },false)
</script>

自己试试，是不是感觉很棒，我感觉这可以用在好多web小游戏上了。

事件委托是 DOM 事件最有用的模式之一。

它通常用于为许多相似的元素添加相同的处理。

事件委托用法：

在容器（container）上放一个处理程序。
在处理程序中 —— 检查源元素 event.target。
如果事件发生在我们感兴趣的元素内，那么处理该事件。

事件委托的好处：

简化初始化并节省内存：无需添加许多处理程序。
更少的代码：添加或移除元素时，无需添加/移除处理程序。
DOM 修改：我们可以使用 innerHTML 等，来批量添加/移除元素

渣渣砖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速理解事件委托？

捕获和冒泡允许我们实现一种被称为事件委托的强大的事件处理模式。如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg...
复制链接

扫一扫