JavaScript自定义事件

1. 引言

在Web中，事件，通常是指某个动作的完成，比如，鼠标点击、鼠标移动、键盘按下等

事件监听，通常是指监听某个动作，动作完成后触发相应的变化，如，鼠标点击按钮后弹出确认框

通过事件监听，当某个事件完成或者状态改变时，可以触发监听者的更新或预设行为，比如，点击按钮弹出确认框、窗口大小改变时网页内容也改变大小等

在软件工程中，这种设计模式叫观察者模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其所有依赖者都会收到通知并自动更新

2. 内置事件

在Web中，事件的主体（即，可以触发与监听事件的对象）通常是DOM对象，如，Button、Div等

2.1 事件监听

事件监听是主要的应用场景

HTML和JS已经内置了大部分会出现的事件，经典的事件如点击事件，通常Button可以这样监听：

<body>
  <button>按钮</button>
  <script>
    var btn = document.querySelector('button');
      
    btn.onclick = function() {
      console.log('click');
    }
  </script>
</body>

即设置on+<event name>属性的方式，设置对事件的监听

现在通常使用下面的方式实现监听：

<body>
  <button>按钮</button>
  <script>
    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      console.log('click');
    });
    
  </script>
</body>

浏览器中实现的详细的事件，可以从MDN中查询：Event - Web API 接口参考 | MDN (mozilla.org)

2.2 事件触发

通常事件触发是行为触发的，比如，鼠标去点击按钮触发

有时需要通过代码去主动触发，如何实现代码主动触发事件呢

经典的事件，通常DOM对象内置了主动触发的方法，如点击事件：

<body>
  <button>按钮</button>
  <script>
    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      console.log('click');
    });
      
    btn.click(); // 触发点击事件
    
  </script>
</body>

如果DOM对象没有内置了主动触发的方法，可以使用下面这种方式：

<body>
  <button>按钮</button>
  <script>
    var btn = document.querySelector('button');

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

    btn.dispatchEvent(new Event('click')); // 触发click事件
    
  </script>
</body>

3. 自定义事件

3.1 DOM对象

上述事件是浏览器内置所支持的，加入浏览器没有支持或者想自定义事件呢，比如，想监听数据加载，加载完成后对应的DOM元素刷新

这时可以设置一个名为dataLoaded的自定义事件（Custom Event），将DOM元素设置为监听者，然后加载数据后触发事件：

<body>
  <div id="containter"></div>
  <script>
    const container = document.getElementById('containter');

    container.addEventListener('dataLoaded', (e) => {
      console.log(e.detail);
      container.innerHTML = `<h1>${e.detail.name}</h1><p>${e.detail.age}</p>`
    })

    function load() {
      // 模拟数据加载
      const data = {
        name: 'John',
        age: 20
      }
      const event = new CustomEvent('dataLoaded', {
        detail: data
      })
      container.dispatchEvent(event); // 触发dataLoaded事件
    }

    load();
  </script>
</body>

CustomEvent的详细介绍可以参考：CustomEvent() - Web API 接口参考 | MDN (mozilla.org)

上述代码中，看上去这个事件机制用法是多余的，完全可以在加载数据后执行相应的更新函数即可，何必再套一层事件监听与事件触发呢

倒也不然，如下面这个例子，有三个文件，分别是index.html，index.js，request.js

index.html：

<body>
  <div id="containter"></div>
  <script>
    const container = document.getElementById('containter');

    container.addEventListener('dataLoaded', (e) => {
      console.log(e.detail);
      container.innerHTML = `<h1>${e.detail.name}</h1><p>${e.detail.age}</p>`
    })

  </script>
</body>

index.js：

const container = document.getElementById('containter');

container.addEventListener('dataLoaded', (e) => {
   doSomething()
})

function doSomething(){
    // ...
}

request.js：

function load() {
    // 模拟数据加载
    const data = {
        name: 'John',
        age: 20
    }
    const event = new CustomEvent('dataLoaded', {
        detail: data
    })
    container.dispatchEvent(event);
}

load();

上述示例中，在数据加载后，其余各处会执行相应的函数，代码组织也更为易懂

3.2 JS对象

上面所述的均为DOM对象，JS中的对象能否监听事件呢

答曰，可以，需要继承EventTarget

EventTarget详细的API介绍可以参考MDN：EventTarget - Web API 接口参考 | MDN (mozilla.org)

下面是一个示例代码，展示了如何编写一个类，继承自EventTarget，并实现事件监听功能：

class MyObject extends EventTarget {
  myMethod() {
    // 在方法内部触发事件
    this.dispatchEvent(new Event('myEvent'));
  }
}

// 实例化对象
const obj = new MyObject();

// 添加事件监听器
obj.addEventListener('myEvent', myEventHandler);

// 事件处理函数
function myEventHandler(event) {
  // 处理事件的逻辑
  console.log('Event triggered:', event);
}

// 调用方法，触发事件
obj.myMethod();