js中的事件冒泡与事件捕获

迈不过友情╰ 2023-10-11 21:21 68阅读 0赞

#### js中的事件冒泡与事件捕获 ####

*  1. 问题场景
 *  2. js事件流
 *   *  2.1 捕获和冒泡
     *  2.1 事件流阻止
     *   *  2.1.1 stopPropagation()
         *  2.1.2 stopImmediatePropagation()
 *  3. 解决

## 1. 问题场景 ##

实现了一个同时能够通过鼠标拖拽移动盒子（蓝色部分）以及拖动改变盒子宽高（红色和黄色部分）的效果，但是当想要通过拉动黄色区域部分改变盒子宽度时，发现整个盒子都被拖动，即触发了蓝色区域部分的事件。  
![在这里插入图片描述][8012d167c36e4cf380aba19ade83fd2e.png]附上  
问题代码：  
![在这里插入图片描述][5df1d2e4c9b24e49b538486ba4cbf2b9.png]  
大概的意思就是给父盒子box添加了鼠标拖动事件，给两个子元素分别添加了拖拽改变盒子宽度和高度的事件，结果发生了冲突。  
为什么会这样呢？出现这个问题的原因其实就是js的事件流执行过程导致的。那么什么是js事件流呢？

## 2. js事件流 ##

js中事件执行的整个过程称之为事件流，分为三个阶段：事件捕获阶段，处于目标阶段、事件冒泡阶段。

*  事件捕获：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
 *  处于目标阶段：传播到事件触发处，触发注册的事件。
 *  事件冒泡阶段：与事件捕获阶段相反，由内到外进行事件传播，直到根节点。  
    ![在这里插入图片描述][cba5ca15cb8845eeb071b8e9065432f1.png]

### 2.1 捕获和冒泡 ###

<body>
        <div id="app">div1
            <div id="box">div2
                <div id="title">div3
                </div>
            </div>
        </div>
    
        <script>
            let app = document.getElementById('app')
            let box = document.getElementById('box')
            let title = document.getElementById('title')
            app.addEventListener('click', () => {
        
                console.log('div1');
            })
            box.addEventListener('click', () => {
        
                console.log('div2');
            })
            title.addEventListener('click', () => {
        
                console.log('div3');
            })
        </script>
    </body>

此时页面效果为：  
![在这里插入图片描述][85254820845e4c7f87ef4de5cdc8414a.png]  
当点击最里面的容器（即黑色容器）代码打印顺序为：div3，div2，div1。  
W3C的标准是先捕获再冒泡， addEventListener的第三个参数决定把事件注册在捕获（true）还是冒泡(false)。当点击黑色容器时，开始进行事件捕获，Js事件流从window上往事件触发处传播，遇到注册的捕获事件就会触发；但是捕获阶段默认是不处理的（addEventListener第三个参数默认是false）,紧接着传播到事件触发处，触发注册的事件，打印div3，然后进行冒泡阶段从事件触发处 往window上传播，遇到注册的冒泡事件会触发，打印div2，再打印div1。  
![在这里插入图片描述][97e829a7c36a4934bdbabef3c2897925.png]  
现在如果给第二个容器的监听点击事件传入第三个参数true，即捕获阶段执行事件。那么打印顺序变为：div2,div3,div1。

### 2.1 事件流阻止 ###

在一些情况下需要阻止事件流的传播，阻止默认动作的发生。

*  `event.preventDefault()`：阻止默认事件。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。但不会阻止事件的传播。
 *  `event.stopPropagation()`：阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生。
    
     *  一般来说，如果只希望**事件只触发在目标上**，这时候可以使用 `stopPropagation`来阻止事件的进一步传播。通常我们认为 `stopPropagation` 是用来阻止事件冒泡的，其实该函数**也可以阻止捕获事件**。
 *  `event.stopImmediatePropagation`：阻止事件冒泡，还能阻止该事件目标执行别的注册事件。
 *  `return false`：同时阻止事件冒泡也会阻止默认事件。

#### 2.1.1 stopPropagation() ####

在上述第三个容器监听事件中加入stopPropagation

title.addEventListener('click', (event) => {
        
        console.log('div3');
        event.stopPropagation()
    })

点击黑色容器，此时打印结果只有div3，因为这个方法阻止了事件流的传播。  
![在这里插入图片描述][900123708fe24622b367bb36fb642e80.png]

#### 2.1.2 stopImmediatePropagation() ####

给第三个容器监听事件中再添加一个事件，并且使用stopImmediatePropagation。

title.addEventListener('click', (event) => {
        
        console.log('div3');
        event.stopImmediatePropagation()
    })
    title.addEventListener('click', () => {
        
        console.log('_div3');
    })

同样点击黑色容器，此时打印结果也只有div3，这个方法终止了默认事件，同时也终止了这个容器的其他事件。  
如果是stopPropagation()方法会有两个打印结果，也就是它不会终止这个容器的其他事件，这就是这两个方法的区别。

## 3. 解决 ##

到这里，其实已经可以发现为什么会产生上述场景中的问题。就是因为点击了盒子的子元素（黄色和红色部分），事件冒泡到了绑定拖拽事件的父元素身上（蓝色部分），导致触发的是拖拽效果。  
**解决方法**：给改变盒子宽度和高度的两个子元素的事件中添加stopPropagation方法阻止事件传播即可。

boxResize() {
        
          let resizeBox = this.$refs.box; //需要改变宽度的元素
          let resizeWidth = this.$refs.resizeWidth; //操控拖拽改变宽度的侧边滑块
          let resizeHeight = this.$refs.resizeHeight; //操控拖拽改变高度的底部滑块
          //鼠标按下改变盒子宽度
          resizeWidth.onmousedown = (e) => {
        
            e.stopPropagation();//阻止冒泡
            let initWidth = resizeBox.clientWidth; 
            let startX = e.clientX; 
            const minW = 50; 
            const maxW = 1000; 
            document.onmousemove = function(e) {
        
              let changeX = e.clientX - startX; //鼠标移动后变化（增大或减小）的距离
              let curWidth = initWidth + changeX; //元素当前宽度 = 初始宽度 + 变化的宽度
              curWidth = curWidth < minW ? minW : curWidth;
              curWidth = curWidth > maxW ? maxW : curWidth;
              resizeBox.style.width = curWidth + "px"; 
            };
            document.onmouseup = function(e) {
        
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
          //鼠标按下改变盒子高度
          resizeHeight.onmousedown = (e) => {
        
            e.stopPropagation();//阻止冒泡
            const initHeight = resizeBox.clientHeight;
            const startY = e.clientY;
            const minH = 50;
            const maxH = 1000;
            document.onmousemove = function(e) {
        
              let curHeight = initHeight + (e.clientY - startY);
              curHeight = curHeight < minH ? minH : curHeight;
              curHeight = curHeight > maxH ? maxH : curHeight;
              resizeBox.style.height = curHeight + "px";
            };
            document.onmouseup = function(e) {
        
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
        },

[8012d167c36e4cf380aba19ade83fd2e.png]: https://img-blog.csdnimg.cn/8012d167c36e4cf380aba19ade83fd2e.png
[5df1d2e4c9b24e49b538486ba4cbf2b9.png]: https://img-blog.csdnimg.cn/5df1d2e4c9b24e49b538486ba4cbf2b9.png
[cba5ca15cb8845eeb071b8e9065432f1.png]: https://img-blog.csdnimg.cn/cba5ca15cb8845eeb071b8e9065432f1.png
[85254820845e4c7f87ef4de5cdc8414a.png]: https://img-blog.csdnimg.cn/85254820845e4c7f87ef4de5cdc8414a.png
[97e829a7c36a4934bdbabef3c2897925.png]: https://img-blog.csdnimg.cn/97e829a7c36a4934bdbabef3c2897925.png
[900123708fe24622b367bb36fb642e80.png]: https://img-blog.csdnimg.cn/900123708fe24622b367bb36fb642e80.png