JavaScript基础知识：阻止事件默认行为和阻止事件传播

JavaScript基础知识：preventDefault和stopPropagation

整理🖊 一下两个不太常用且重要的知识点！

1. preventDefault()事件方法

   1. 【定义】：如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。

   2. 【应用场景】：

      1. 单击“提交”按钮，阻止其提交表单

         • Code

           <form action="https://www.baidu.com/"  method="post">
                <input type="submit" value="登录">
           </form>
           
           <script>
                   console.log(document.forms[0]);
                   document.forms[0].onsubmit =  function(){
                       console.log(event);
                       console.log(event.cancelable);//检测事件是否可以取消--> Boolean
                       event.preventDefault();//阻止默认事件
                       //return false; // 也可以阻止默认事件
                   }
           </script>
           

      2. 单击链接，防止链接跟随 URL

         • Code

           <a href="https://www.baidu.com/" id="a">点我跳转</a>
           
           <script>
           		let a = document.getElementById('a');
                   a.onclick = function(){
                       console.log(event);
                       console.log(event.cancelable);//检测事件是否可以取消 -->Boolean
                       event.preventDefault();//阻止默认事件
                       //return false; // 也可以阻止默认事件
                   }
           </script>
           
           

   3. 【注】并非所有活动都可以取消。请使用 cancelable 属性 来确定事件是否可取消。

      1. 如上面两个示例中，其返回值为Boolean，可以取消–>true,否则为–>false

   4. 【注】preventDefault() 方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决 – ⏬下面讲解 。

2. stopPropagation()事件方法

   1. 【定义】stopPropagation() 方法防止调用相同事件的传播。

   2. 【传播阶段】传播意味着向上冒泡到父元素或向下捕获到子元素或元素目标本体 三个3️⃣ 阶段

      1. 【注】添加事件（HTML属性事件，JavaScript元素事件，addEventLisenter ，attachEvent（IE））默认都是冒泡，捕获需要**addEventLisenter()**显式的指定第三个参数为true（事件捕获）

   3. Code

      • //样式
        <style>
                div {
                    padding: 50px;
                    background-color: rgba(255, 0, 0, 0.2);
                    text-align: center;
                    cursor: pointer;
                }
        </style>
        
        //HTML
        	<p>Click DIV 1:</p>
            <div onclick="func2()">DIV 2
                <div onclick="func1(event)">DIV 1</div>
            </div>
            
        //script
        <script>
                function func1(event) {
                    alert("DIV 1");
                    event.stopPropagation();//阻止事件传播
                }
        
                function func2() {
                    alert("DIV 2");
                }
        </script>
        

      • 不阻止事件传播的话，当点击DIV2时，事件会继续向上传播，触发父元素DIV1上的func2(),然后会继续向上传播，直到window对象

   与大雁齐飞,目之所及皆是广袤天空;与苍蝇为伍,所到之处皆是污秽狼藉。