事件冒泡、事件捕获、事件委托

最新推荐文章于 2024-04-05 11:31:21 发布

躺屋顶看月亮

最新推荐文章于 2024-04-05 11:31:21 发布

阅读量1.4k

点赞数

分类专栏： js进阶文章标签：事件冒泡事件委托事件捕获

本文链接：https://blog.csdn.net/liuxuan12417/article/details/53315609

版权

js进阶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么叫事件冒泡？
以onclick事件为例：
我要通过给元素绑定点击事件改变某个元素的属性。
我在这个元素上点击一下。可是，这个元素节点外面被其它节点元素包裹，自身也包裹着其它节点元素，浏览器并不能判断它要改变那一层节点元素的属性。
这时，浏览器会从最里层节点元素开始，查找该节点元素是否具有响应点击事件的代码，如果没有，浏览器会向上一层查找，直到找到能够响应点击事件的代码为止。这个过程称为事件冒泡。
专业一点的解释就是事件从内到外传递的过程称为事件冒泡。

事件委托就是应用了事件冒泡。事件有一个target属性指向从内到外的所有层级节点，通过该属性我可以轻松定位到指该定层的节点，进而修改该节点的属性。这样就实现了通过给父级节点绑定事件的方法实现对子级·节点属性的修改。
请看下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table事件委托</title>
</head>
<body>
    <table id="table">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
    </table>
    <script type="text/javascript">
    var table = document.getElementById("table");

    table.onclick = function(e){
        //隐含的事件对象event
        //兼容的写法，event ,事件目标
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // console.log(target.tagName);
        //查看元素的标签名，返回来的是大写的字符串
        //document.body.tagName->"BODY"
        if(target.tagName == "LI") {//判断事件目标是否我们所要添加事件的元素;

            target.innerHTML =parseInt(target.innerHTML) + 10;
        }
    }
    </script>
</body>
</html>

阻止事件冒泡
当我们只希望触动某个节点元素，而不希望它向上传播时，可以通过以下方式来阻止冒泡。
使用on方式绑定的事件通过cancelBubble阻止冒泡。
使用addEventlisten绑定的事件可以用stopPropagation。

事件捕捉
事件捕捉和事件冒泡两则事件的传播方向相反，事件冒泡是由外向内传递，事件捕捉是由外向内传递。

事件捕捉阻止事件传播的方式。
on这种方式绑定的事件，都是添加到事件流中的冒泡阶段
addEventListener(type,handle,boolean)
boolean 为true，表示事件添加到捕获阶段
boolean 为false,表示添加到冒泡阶段

躺屋顶看月亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡、事件捕获、事件委托

什么叫事件冒泡？以onclick事件为例：我要通过给元素绑定点击事件改变某个元素的属性。我在这个元素上点击一下。可是，这个元素节点外面被其它节点元素包裹，自身也包裹着其它节点元素，浏览器并不能判断它要改变那一层节点元素的属性。这时，浏览器会从最里层节点元素开始，查找该节点元素是否具有响应点击事件的代码，如果没有，浏览器会向上一层查找，直到找到能够响应点击事件的代码为止。这个过程称为事
复制链接

扫一扫

专栏目录