深度理解DOM事件（实例）

前言

通过如下两个实例来理解DOM事件

实例1--点击别处关闭浮层
onclick与addEventListener的区别
实例2--点击后颜色一层一个层出现的漂亮的彩虹圈

1 实例1--点击别处关闭浮层

代码效果演示：原生JS 、 jQuery

HTML代码

  <div id="wrapper" class="wrapper">

    <button id="clickMe">点我</button>

    <div id="popover" class="popover">

      <input type="checkbox">浮层

    </div>

  </div>

CSS代码

.wrapper{

  display:inline-block;

  position: relative;

}

.popover{

  display: none;

  border: 1px orange solid;

  top: 0px;

  /*宽度是上级元素的100%*/

  left: %;

  padding: 8px;

  border-radius: 4px;

  position: absolute;

  background: white;

  /*规定段落中的文本不进行换行*/

  white-space: nowrap;

}

/*画浮层左边的小指向箭头*/

.popover::before{

  position: absolute;

  right: %;

  top: 4px;

  border: 10px solid transparent;

  border-right-color: orange;

  content: '';

}

.popover::after{

  position: absolute;

  right: %;

  top: 4px;

  border: 10px solid transparent;

  border-right-color: white;

  content: '';

  margin-right: -1px;

}

JS代码-原生js

/*点击按钮触发浮层*/

clickMe.addEventListener('click', function(){

  popover.style.display = 'block'

})

/*阻止默认事件*/

wrapper.addEventListener('click', function(e){

   e.stopPropagation()

 })

/*点击任意处关闭浮层*/

document.addEventListener('click', function(){

  popover.style.display = 'none'

})

JS代码-jQuery

$(clickMe).on('click',function(){

  $(popover).show()

  /*如果不加定时器会同步执行show()和hide(),即看起来什么都没有发生*/

  setTimeout(function(){

     $(document).one('click', function() {

       $(popover).hide()

     })

  },)

})

2 onclick与addEventListener的区别

实例1使用的原生JS，为什么使用addEventListener()，而不使用onclick() --onclick()只能添加一个事件，多个事件时只会输出最后一个，而实例1中存在多个事件，不能用onclick()
onclick与addEventListener实际上可分为：Inline events与Event Listeners

Event Listeners (“addEventListener” and “IE's attachEvent”)

两者相同点：都是时间监听器。

两者不同点：

addEventListener：很多浏览器支持addEventListener(IE9、IE10、IE11、chrome、firefox、opera、safari支持)，使用方式如下：

//addEventListener接受三个参数，最后一个参数默认是false。（false表示事件处理将在冒泡阶段执行，true表示事件处理将在捕获阶段执行）

//addEventListener(type,listener,options)

var target = document.getElementById("test");

target.addEventListener('click',function test(){

        console.log("Hi");

},false)

attachEvent：IE中提供的类似addEventListener的事件监听器，使用方式如下：

//qqq

var target = document.getElementById("test");

target.attachEvent('onclick',test);

function test(){

     console.log("Hi");

}

理论上，Event Listeners (addEventListener and IE's attachEvent)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异

var target = document.getElementById("test");

target.addEventListener('click',function test(){

        console.log("Hi");

},false)

target.addEventListener('click',function test(){

        console.log("Hello");

},false)

//Hi

//Hello

Inline events (“HTML onclick="" property” and “element.onclick”)

- 使用方式：

onclick=""　　　　

<a id="test" href="#" onclick="function()">clickMe</a>

element.onclick　　　　　　

<a id="test" href="#">clickMe</a>

var target = document.getElementById('test')

target.onclick = function(){

    console.log('Hi');

}

Inline events只能添加一个事件，如果同时有多个，只会输出最后一个的结果　　　

var target = document.getElementById('tttt')

target.onclick = function(){

    console.log('Hi');

}

target.onclick = function(){

    console.log('Hello');

}
//Hello

Inline events与Event Listeners的区别：Event Listeners可以添加无数个(理论上)事件，Inline events只能添加1个事件，且下面的会覆盖上面的。

3 实例2--点击后颜色一层一个层出现的漂亮的彩虹圈

代码效果：彩虹圈

HTML代码

<div class="red">

  <div class="blue">

    <div class="green">

      <div class="yellow">

        <div class="orange">

          <div class="purple">

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

CSS代码

*{margin:;padding:;box-sizing:border-box;}

//设置背景颜色

.red.active { background: red; }

.blue.active { background: blue; }

.green.active { background: green; }

.yellow.active { background: yellow; }

.orange.active { background: orange; }

.purple.active { background: purple; }

//设置一层一层圆圈以及动画过渡事件

div {

  border: 1px solid black;

  padding: 10px;

  transition: all .5s;

  display: flex;

  flex:;

  border-radius: %;

  background: white;

}

//设置最外圈的长宽

.red{ width: 100vw; height: 100vw; }

JS代码

let divs = $('div').get()

let n =

for (let i = ; i < divs.length; i++) {

   //addEventListener()最后一个参数为true

   //即执行捕获阶段--从外层到里层，即从爷爷到儿子

  divs[i].addEventListener('click', function() {

    setTimeout(function() {

      divs[i].classList.add('active')

    }, n * )

    n +=

  }, true)

}

for (let i = ; i < divs.length; i++) {

   //addEventListener()最后一个参数为false

   //即执行冒泡阶段--从里层到外层，即从儿子到爷爷

  divs[i].addEventListener('click', function() {

    setTimeout(function() {

      divs[i].classList.remove('active')

    }, n * )

    n +=

  }, false)

}

//⚠️有一个特殊情况：即如果都是自己身上同时捕获(true)和冒泡(false),此时执行顺序和捕获(true)和冒泡(false)无关，谁在前面就先执行哪个