【基础类】—DOM事件系统性学习

一、基本概念：DOM事件的级别

// DOM0
element.onclick=function(){}
// DOM2, 新增了冒泡和捕获
element.addEventListener('click',function(){}, false)
// DOM3, 新增更多事件类型 鼠标、键盘等
element.addEventListener('keyup',function(){}, false)

二、DOM事件模型

捕获和冒泡

三、DOM事件流

事件流：浏览器再页面做交互的过程中，比如点击鼠标左键，这个左键如何传递到页面上，就是事件流
完整事件流： 捕获 → 目标阶段 → 冒泡

四、描述DOM事件捕获的具体流程

1. 事件捕获：是从上到下的过程
2. 第一个接收事件的对象是window
3. 具体流程： window → document → html → body → … (按照html结构往下传递) → 目标元素

  <div id="eve">
    <style>
      #eve {
        width: 100px;
        height: 100px;
        background-color: aqua;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
      }
    style>
    目标元素
  div>
  <script type="text/javascript">
    var ev = document.getElementById('eve');
    ev.addEventListener('click', function() {
      console.log('目标元素');
    }, true);
    document.body.addEventListener('click', function() {
      console.log('body');
    }, true);
    document.addEventListener('click', function() {
      console.log('document');
    }, true);
    window.addEventListener('click', function() {
      console.log('window');
    }, true);
    document.documentElement.addEventListener('click', function() {
      console.log('html');
    }, true);
  script>

4. 如何使用js获取html节点：document.documentElement

五、Event对象的常见应用

1. event.preventDefaylt() 阻止默认事件
   场景描述：比如有一个需求，再点击a标签时，做一些js逻辑，需要阻止a标签的跳转行为
2. event.stopPropagation() 阻止事件冒泡
   场景描述：父元素绑定事件A和子元素绑定事件B，我希望点击子元素时，只触发事件B， 不需要往上冒泡触发父元素的事件A
3. event.stoplmmediatePropagation() 阻止事件冒泡 + 阻止相同事件监听被调用
   场景描述：假设一个元素同时绑定两个click事件，再第一次执行click事件时，执行stoplmmediatePropagation，阻止冒泡的同时也阻止了第二个click时间

div.addEventListener("click" , function(){
  alert("第一次执行");
  stopImmediatePropagation();
} , true);
​
div.addEventListener("click" , function(){
  alert("第二次执行");
} , true); 
​
// 点击div，第二次执行不会触发

4. event.currentTarget 获取绑定事件的DOM对象
   场景描述：给ul绑定事件，event.currentTarget 获取ul的dom对象

5. event.target 获取实际触发事件的DOM对象
   场景描述：给多个li标签绑定click事件，一般情况下会循环li节点，给每一个li绑定事件。这种情况会消耗大量的性能，可以通过事件委托的方式，把所有li事件绑定到一个ul上，通过event.target获取具体是哪一个li被点击

六、自定义事件（模拟事件）

1. Event 自定义事件

var eve = new Event('custome');  // 声明一个自定义事件对象
var dom = document.getElementById("dom");
// 给dom节点绑定自定义事件
dom.addEventListener('custome',function(){
	console.log('custome')
})
// 触发自定义事件
dom.dispatchEvent(eve)
// custome

2. CustomEvent 自定义事件，可待参数

var eve = new CustomEvent('custome', {detail: {name: '张三', phone: '13751032412'}}); 
 // 声明一个自定义事件对象, 允许加参数
var dom = document.getElementById("dom");
// 给dom节点绑定自定义事件
dom.addEventListener('custome',function(e){
	console.log('参数', e.detail)
})
// 触发自定义事件
dom.dispatchEvent(eve)
// 参数 {name: '张三', phone: '13751032412'}