preventDefault、stopImmediatePropagation和stopPropagation三剑客区别

三剑客区别

  • 1. preventDefault()
    • 阻止默认的点击事件执行
      • 1. 阻止选中复选框
      • 2. 在编辑域中阻止按键
  • 2. stopImmediatePropagation
    • 阻止监听同一事件的其他事件监听器被调用
  • 3. stopPropagation()
    • 阻止当前事件捕获和冒泡

1. preventDefault()

阻止默认的点击事件执行

1. 阻止选中复选框

下面的例子中,点击复选框时,因为调用了preventDefault函数,阻止了默认事件(复选框的默认事件是选中复选框),所以复选框不会被选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>preventDefault</title>
</head>
<body>

<form>
  <label for="demo">Checkbox:</label>
  <input type="checkbox" id="demo"/>
</form>
<div id="output-box"></div>
<script>
document.querySelector("#demo").addEventListener("click", function(event) {
     
		 document.getElementById("output-box").innerHTML += "Sorry! preventDefault() won't let you check this!
"
; event.preventDefault();//阻止复选框默认选中 }, false); </script> </body> </html>

效果图:
preventDefault、stopImmediatePropagation和stopPropagation三剑客区别_第1张图片

2. 在编辑域中阻止按键

下面的例子中,当输入的字符的ASC码小于97或者大于122时,文本输入框是不会显示输入的字符,而是弹出一个提示两秒时长的红色提示框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>preventDefault</title>
<style type="text/css">
.warning {
     
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}
</style>
</head>
<body>

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox">
  </form>
</div>


<script>
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
function checkName(evt) {
     
  var charCode = evt.charCode;
  if (charCode != 0) {
     
    if (charCode < 97 || charCode > 122) {
     
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
     
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
     
    window.clearTimeout(warningTimeout);
  } else {
     
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function() {
     
      warningBox.parentNode.removeChild(warningBox);
      warningTimeout = -1;
    }, 2000);
}
</script>

</body>
</html>

效果图:
preventDefault、stopImmediatePropagation和stopPropagation三剑客区别_第2张图片

2. stopImmediatePropagation

阻止监听同一事件的其他事件监听器被调用

下面的例子中,点击p元素后,弹出第一个和第二个提示框后,后面按照顺序添加进去的提示框就不会再弹出了,同时,事件不会向上冒泡,所以div上面的click事件函数也不会执行。

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
      height: 30px; width: 150px; background-color: #ccf; }
            div {
     height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            const p = document.querySelector('p')
            p.addEventListener("click", (event) => {
     
              alert("我是p元素上被绑定的第一个监听函数");
            }, false);

            p.addEventListener("click", (event) => {
     
              alert("我是p元素上被绑定的第二个监听函数");
              event.stopImmediatePropagation();
              // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
            }, false);

            p.addEventListener("click",(event) => {
     
              alert("我是p元素上被绑定的第三个监听函数");
              // 该监听函数排在上个函数后面,该函数不会被执行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
     
              alert("我是div元素,我是p元素的上层元素");
              // p元素的click事件没有向上冒泡,该函数不会被执行
            }, false);
        </script>
    </body>
</html>

效果图:
preventDefault、stopImmediatePropagation和stopPropagation三剑客区别_第3张图片

3. stopPropagation()

阻止当前事件捕获和冒泡

下面的例子中,点击表格的第一行时,会阻止事件冒泡,table上的监听click事件的函数不会执行;
点击表格的第二行时,table上的监听click事件的函数会执行;

<!DOCTYPE html>
<html>
<head>
<title>Event Propagation</title>

<style type="text/css">
 #t-daddy {
      border: 1px solid red }
 #c1 {
      background-color: pink; }
</style>

<script type="text/javascript">

function stopEvent(ev) {
     
  c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

function load() {
     
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
</script>
</head>

<body onload="load();">

<table id="t-daddy" onclick="alert('hi');">
 <tr id="tbl1">
  <td id="c1">one</td>
 </tr>
 <tr>
  <td id="c2">two</td>
 </tr>
</table>

</body>
</html>

preventDefault、stopImmediatePropagation和stopPropagation三剑客区别_第4张图片

你可能感兴趣的:(javascript,js)