jsDOM逐步实现原生事件机制（html逻辑 css逻辑 js逻辑）

css：

body
        {
            overflow: hidden;   
        }
        div {
            padding: 100px;
        }

        .one {
            background: thistle;
        }

        .two {
            background: mistyrose;
        }

        .three {
            background: coral;
        }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

html:

 <div class="one">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>

  

 

  
1
  
2
  
3
  
4
  
5
 

js逻辑：
第一步：

let divs = document.querySelectorAll('div');
        let one = document.querySelector('.one');
        let two = document.querySelector('.two');
        let three = document.querySelector('.three');

  

 

  
1
  
2
  
3
  
4
 

第一步;获取节点，要用得拿到是吧

 divs.forEach(div => div.addEventListener('click', logText, {
            once: true,
            capture: false
        }));

  

 

  
1
  
2
  
3
  
4
 

第二步;once: true,点击一个执行一个.
capture: false是只执行对应层.

 function logText(e) {
            console.log(this.classList.value);
             e.stopPropagation();
        }

  

 

  
1
  
2
  
3
  
4
 

文章来源: blog.csdn.net，作者：贵哥的编程之路(陈业贵)，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/qq_37805832/article/details/109171350