【前端】DOM事件模型

https://www.w3.org/DOM/DOMTR.html主要学习DOM level2

DOM level0：

onclick（一旦用户点击，浏览器就执行onclick后的代码，要执行函数就需要记得带上’（ ）‘ 在html中写需要带上（），在js中写不需要（） ）

onerror、onload、onmouseenter

 

DOM level2：

elid.addEventListener('click',function(){
console.log(1);
})

和DOM 0 绑定方法区别：

DOM 0 只可以绑定一个

DOM 2 可以绑定两个

xxx.onclick = function(){ 
console.log(1)// 有可能会覆盖之前xxx的点击事件

}

注：addEventListener绑定的事件是一个队列，先进先出，按顺序执行。

 

事件冒泡和事件捕获

注：浏览器默认冒泡

举例：

yeye.addEventListener('click',function f1(){
console.log("爷爷")
},false)//第二个参数不传入的话会传入undefined，逻辑上是falsey


baba.addEventListener('click',function f2(){
console.log("父亲")
},false)

erzi.addEventListener('click',function f3(){
console.log("儿子")
},false)

 

输出：儿子-父亲-爷爷

 

yeye.addEventListener('click',function f1(){
console.log("爷爷")
},true)

baba.addEventListener('click',function f2(){
console.log("父亲")
},true)

erzi.addEventListener('click',function f3(){
console.log("儿子")
},true)

 

输出：爷爷-父亲-儿子

 

yeye.addEventListener('click',function f1(){
console.log("爷爷")
},true)

baba.addEventListener('click',function f2(){
console.log("父亲")
},false)

erzi.addEventListener('click',function f3(){
console.log("儿子")
},true)

输出：爷爷-儿子-父亲

erzi.addEventListener('click',function f1(){
console.log("儿子捕获")
},false)

baba.addEventListener('click',function f2(){
console.log("父亲")
},false)

erzi.addEventListener('click',function f3(){
console.log("儿子")
},true)

相同节点绑定两个事件，会按照顺序执行。

输出：儿子捕获-儿子-父亲

 

 

如何利用或阻止冒泡/捕获

效果：点击按钮出现浮层，点击其他位置隐藏浮层

方法一：

//可以采用捕获的方式，如果冒泡的方式则会出现点击按钮不出现，因为点见按钮出现之后还会执行document的点击事件，又被隐藏了，所以要把这里改成捕获事件
btn.addEventListener('click',function(){
  popover.style.display = 'block';
},true)


document.addEventListener('click',function(){
  popover.style.display = 'none';
},true)

方法二：

 

btn.addEventListener('click',function(e){
  popover.style.display = 'block';
  e.stopPropagation();//添加这个api
})


document.addEventListener('click',function(){
  popover.style.display = 'none';
})

也同样可以采用这种思路：

$('#btn').on('click',function(){
  $('#popover').show();
  $(document).one('click',function(){
      $('#popover').hide();
  })
})

但是发现没效果，原因是因为：当btn被点击之后，下边documen的方法会被立即执行，也就是立即在document点击事件队列中添加一个事件，但是此时冒泡过程仍在进行，所以冒泡到document的时候，发现document有一个隐藏的方法，所以就会把浮窗给隐藏了。

应该修改：

$('#btn').on('click',function(){
  $('#popover').show();
  setTimeout(function(){
      $(document).one('click',function(){
      $('#popover').hide();
      })
  },0)
})

添加setTimeout可以将下边代码阻塞，等待冒泡结束之后在创建document监听事件

 

事件visibilitychange

当页面被切换时，这个状态会由true改变为false，可以进行一些操作。