JS DOM编程笔记 - 自定义事件（二二）

今天我们来学习 JavaScript 中的自定义事件，如何创建自定义事件，如何监听调用，为什么要用到自定义事件。

JavaScript 自定义事件简介

下面函数通过将元素的背景颜色改为黄色来突出显示元素：

function highlight(elem) {
    
    
  const bgColor = 'yellow';
  elem.style.backgroundColor = bgColor;
}

要在修改背景颜色后执行一段逻辑，我们可能会使用回调函数：

function highlight(elem, callback) {
    
    
  const bgColor = 'yellow';
  elem.style.backgroundColor = bgColor;

  if(callback && typeof callback === 'function') {
    
    
    callback(elem);
  }
}

下面调用 highlight() 函数为 <div> 元素添加边框：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 自定义事件示例</title>
</head>
<body>
  <div class="note">JavaScript 自定义事件示例</div>
  <script>
    function highlight(elem, callback) {
      
      
      const bgColor = 'yellow';
      elem.style.backgroundColor = bgColor;

      if (callback && typeof callback === 'function') {
      
      
        callback(elem);
      }
    }

    let note = document.querySelector('.note');
    function addBorder(elem) {
      
      
      elem.style.border = "solid 1px red";
    }

    highlight(note, addBorder);
  </script>
</body>
</html>

为了使代码更加灵活，我们可以使用自定义事件。

使用JavaScript 自定义事件

要创建自定义事件，使用 CustomEvent() 构造函数：

let event = new CustomEvent(eventType, options);

CustomEvent()有两个参数：

eventType 是一个表示事件名称的字符串。
options 是一个具有 detail 属性的对象，其中包含有关事件的任何自定义信息。

下面示例展示了如何创建一个名为 highlight 的新自定义事件：

let event = new CustomEvent('highlight', {
    
    
  detail: {
    
    backgroundColor: 'yellow'}
});

触发 JavaScript 自定义事件

创建自定义事件后，我们需要将事件绑定到元素并使用 dispatchEvent() 方法触发它：

element.dispatchEvent(event);

JavaScript 自定义事件示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript自定义事件</title>
</head>
<body>
  <div class="note">JavaScript自定义事件</div>
  <script>
    function highlight(elem) {
      
      
      const bgColor = 'yellow';
      elem.style.backgroundColor = bgColor;

      // 创建自定义事件
      let event = new CustomEvent('highlight', {
      
      
        detail: {
      
      
          backgroundColor: bgColor
        }
      });
      // 触发自定义事件
      elem.dispatchEvent(event);
    }

    // 查询div元素
    let div = document.querySelector('.note');

    // 添加border边框
    function addBorder(elem) {
      
      
      elem.style.border = "solid 1px red";
    }

    // 监听highlight事件
    div.addEventListener('highlight', function (e) {
      
      
      addBorder(this);

      // 打印detail属性值
      console.log(e.detail);
    });

    // 高亮div元素
    highlight(div);
  </script>
</body>
</html>

在上面的代码中：

首先在highlight() 函数中触发我们自定义的highlight 事件。
然后我们使用querySelector('.note')找到要操作的元素
之后使用addEventListener()方法来监听highlight 事件，在事件处理函数内调用 addBorder() 函数，并打印detail属性的值。
最后调用highlight()函数。

为什么使用自定义事件

使用自定义事件可以让我们的代码更好的解耦，比如我们可以在单独的JS中专门来处理事件函数，也可以为一个自定义事件来增加多个事件监听。

总结

今天我们使用 CustomEvent() 构造函数来创建自定义事件并使用 dispatchEvent() 来触发事件。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新