事件冒泡,事件物件,事件委托的綜合理解-有解無憂

先來上一段個人總結的理解

1/事件分為三個部分

(1)捕獲階段

(2)目標階段

(3)冒泡階段

事件冒泡

1/阻止事件冒泡是對同類名事件而言 (為什么得出這個結論呢:mousedown ,mouseup , mouseove ,fouce,blur 都嘗試寫了阻斷,當時都沒發阻止最上面的onclick的事件發生,后續又試驗了mousedown )

2/事件冒泡的形象圖:

請注意一點:默認是冒泡的,若是變捕獲,需要改變addEventListener的第三個值
(1):false 默認值冒泡
(2):true 不冒泡捕獲

事件物件:事件特有的物件,e 是變數名,常用的名字,可以為任何名字

document.onclick = functionl(e){   //e 可以為任何名字,建議用e

　　//e有內容 常見的有 
     // e.target   目標
     //e.type   事件型別 .....

　　//當點擊的內容是document本身,那么e.target === this //true
   //當點擊的內容是它內部的div元素,那么e.target ===this  //false

}

//事件委托

什么是委托?

語言的含義: 我把一些感覺可以讓別人幫忙處理的問題委托給別人處理.

在此處在舉一個例子: 公司前臺MM收快遞

那什么叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程式設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件，那這是什么意思呢？網上的各位大牛們講事件委托基本上都用了同一個例子，就是取快遞來解釋這個現象，我仔細揣摩了一下，這個例子
還真是恰當，我就不去想別的例子來解釋了，借花獻佛，我摘過來，大家認真領會一下事件委托到底是一個什么原理：

有三個同事預計會在周一收到快遞，為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收，現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞），前臺MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款，
這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實并代為簽收，

這里其實還有2層意思的：

第一，現在委托前臺的同事是可以代為簽收的，即程式中的現有的dom節點是有事件的；

第二，新員工也是可以被前臺MM代為簽收的，即程式中新添加的dom節點也是有事件的，

第二個點讓我聯想思考了冒泡事件的第二個階段

事件委托的原理(主要理解target屬性)::
就是利用事件冒泡原理(請先理解冒泡),然后通過target屬性,回傳事件的目標節點,稱為事件源,可以理解為target是實際點擊的哪個標簽(dom),但不是實際的dom.

window.onload = function(){            　　
　　var oUl = document.getElementById("ul1");            　　
　　oUl.onclick = function(ev){                　　　　
　　　　var ev = ev || window.event;                   　　　　
　　　　var target = ev.target || ev.srcElement;                　　　　
　　　　if(target.nodeName.toLowerCase() == 'li'){                　 　　　　　　    
　　　　　　alert(123);        　　　　　　　  
　　　　　　alert(target.innerHTML);                　　　　
　　　　}            　　
　　}        
}
借鑒別人的代碼,真的很經典,點個贊

為什么要用事件委托?

一般來說，dom需要有事件處理程式，我們都會直接給它設事件處理程式就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for回圈的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？

在JavaScript中，添加到頁面上的事件處理程式數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行互動，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的互動就緒時間，這就是為什么性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，
就會將所有的操作放到js程式里面，與dom的操作就只需要互動一次，這樣就能大大的減少與dom的互動次數，提高性能；

每個函式都是一個物件，是物件就會占用記憶體，物件越多，記憶體占用率就越大，自然性能就越差了（記憶體不夠用，是硬傷，哈哈），比如上面的100個li，就要占用100個記憶體空間，如果是1000個，10000個呢，那只能說呵呵了，如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個物件
進行操作，這樣我們就需要一個記憶體空間就夠了，是不是省了很多，自然性能就會更好，

這句話讓我有一個深的體會:原先認為dom的操作,對domj節點的增刪改查,樣式的變化等內容才會引起瀏覽器的重繪和重排,現在才知道給dom添加節點也會引起瀏覽器的重繪和重排.

我作業中的代碼,可以執行

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .login-header {
        width: 100%;
        text-align: center;
        height: 30px;
        font-size: 24px;
        line-height: 30px;
      }

      ul,
      li,
      ol,
      dl,
      dt,
      dd,
      div,
      p,
      span,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      a {
        padding: 0px;
        margin: 0px;
      }

      .login {
        width: 512px;
        height: 280px;
        position: absolute;
        left: 0;
        right: 0;
        border: #ebebeb solid 1px;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9999;
        display: none;
        /* overflow: hidden; */
      }

      .login-title {
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;

        /*  火狐  */
        -moz-user-select: none;

        /*webkit瀏覽器*/
        -webkit-user-select: none;
        /*IE10*/
        -ms-user-select: none;
        /*早期瀏覽器*/
        -khtml-user-select: none;
        user-select: none;
      }

      .login-input-content {
        margin-top: 20px;
      }

      .login-button {
        width: 50%;
        margin: 30px auto 0px auto;
        line-height: 40px;
        font-size: 14px;
        border: #ebebeb 1px solid;
        text-align: center;
      }

      .login-bg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #000000;
        filter: alpha(opacity=30);
        opacity: 0.3;
        display: none;
      }

      a {
        text-decoration: none;
        color: #000000;
      }

      .login-button a {
        display: block;
      }

      .login-input input.list-input {
        float: left;
        line-height: 35px;
        height: 35px;
        width: 350px;
        border: #ebebeb 1px solid;
        text-indent: 5px;
      }

      .login-input {
        overflow: hidden;
        margin: 0px 0px 20px 0px;
      }

      .login-input label {
        float: left;
        width: 90px;
        padding-right: 10px;
        text-align: right;
        line-height: 35px;
        height: 35px;
        font-size: 14px;
      }

      .login-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        z-index: 99;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="login-header">
      <a id="link" href=https://www.cnblogs.com/zmztya/p/"javascript:void(0);">點擊，彈出登錄框</a>
    </div>
    <div id="login" class="login">
      <div id="title" class="login-title">
        登錄會員 <span id="closeBtn">關閉</span>
      </div>
      <div class="login-input-content">
        <div class="login-input">
          <label>用戶名：</label>
          <input
            type="text"
            placeholder="請輸入用戶名"
            name="info[username]"
            id="username"
            class="list-input"
          />
        </div>
        <div class="login-input">
          <label>登錄密碼：</label>
          <input
            type="password"
            placeholder="請輸入登錄密碼"
            name="info[password]"
            id="password"
            class="list-input"
          />
        </div>
      </div>
      <div id="loginBtn" class="login-button">
        <a href=https://www.cnblogs.com/zmztya/p/"javascript:void(0);" id="login-button-submit">登錄會員</a>
      </div>
    </div>

    <script>
      // 全部功能
      let loginDom = document.querySelector(".login");
      let linkDom = document.querySelector(".login-header a");
      let closeBtn = document.querySelector("#closeBtn");
      let userNameDom = document.querySelector("#username");
      let passwordDom = document.querySelector("#password");

      let winHeight = window.innerHeight;
      let winWidth = window.innerWidth;
      // API: 頁面的寬度和高度 => window.innerWidth window.innerHeight
      // 1. 顯示login的時候，讓login是水平垂直居中（left、top）不建議用css 會影響到拖拽
      let originX = 0;
      let originY = 0;
      let logTop = 0;
      let logLeft = 0;
      linkDom.addEventListener("click", showFun);
      function showFun(e) {
        console.log("showFun");
        e.stopPropagation();
        loginDom.style.display = "block";
        loginDom.style.top = (winHeight - loginDom.offsetHeight) / 2 + "px";
        loginDom.style.left = (winWidth - loginDom.offsetWidth) / 2 + "px";
      }
      closeBtn.addEventListener("click", closeFun);

      function closeFun(e) {
        loginDom.style.display = "none";
        console.log("closeFun");
      }

      document.addEventListener("click", closeFun);

      loginDom.addEventListener("mousedown", mouseDownFun);
      function mouseDownFun(e) {
        // e.stopPropagation();
        console.log("mouseDownFun");
        originX = e.pageX;
        originY = e.pageY;
        logLeft = this.offsetLeft;
        logTop = this.offsetTop;
        document.addEventListener("mousemove", mouseMoveFun);
      }

      function mouseMoveFun(e) {
        console.log("mouseMoveFun");
        loginDom.style.left = e.pageX - originX + logLeft + "px";
        loginDom.style.top = e.pageY - originY + logTop + "px";
      }
      loginDom.addEventListener("click", logClickFun);
      // loginDom.addEventListener("dblclick", logClickFun);
      function logClickFun(e) {
        // e.stopPropagation();
        console.log("logClickFun");
      }
      loginDom.addEventListener("mouseup", mouseUpFun);

      function mouseUpFun(e) {
        e.stopPropagation();
        console.log("mouseUpFun");
        document.removeEventListener("mousemove", mouseMoveFun);
      }

      // userNameDom.addEventListener("focus", focusFun);
      userNameDom.addEventListener("click", userNameFun);

      function userNameFun(e) {
        e.stopPropagation();
        console.log("userNameFun");
      }
      // function focusFun(e) {
      //   e.stopPropagation();
      //   console.log("blurFun");
      // }
      // 2. 摁住title區域，實作拖拽效果
      // 3. 限制login拖拽的范圍
      // 4. 按住esc 鍵也能關閉掉 login
      // 5. 點擊頁面空白區域關閉也能關掉login
    </script>
  </body>
</html>

阻斷冒泡是對同類事件起效果的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .son {
        width: 50px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <script>
      let fatherDom = document.querySelector(".father");
      let sonDom = document.querySelector(".son");
      fatherDom.addEventListener("mousedown", fatherFun);
      function fatherFun(e) {
        alert("111111");
      }
      sonDom.addEventListener("mousedown", sonFun);
      function sonFun(e) {
        e.stopPropagation();
        alert("2222222222");
      }
    </script>
  </body>
</html>

參考資料:https://www.cnblogs.com/liugang-vip/p/5616484.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/240822.html

標籤：JavaScript

上一篇：OWASP API 安全 TOP 10

下一篇：vue3.0自定義指令（drectives)