jquery 自定义事件监听传值

原创

mob64ca12d12b68 2024-04-10 06:27:30 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d12b68的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 自定义事件监听传值

在开发网页应用程序时，经常会遇到需要在不同组件之间传递数据的情况。jQuery 提供了一种简单而有效的方法来实现自定义事件监听传值的功能，这使得组件之间的通信变得更加灵活和高效。

自定义事件监听

在 jQuery 中，可以使用 .on() 方法来绑定事件监听器，例如：

// 绑定自定义事件监听
$(document).on('customEvent', function(e, data) {
  console.log('接收到数据：', data);
});

触发自定义事件

要触发自定义事件并传递数据，可以使用 .trigger() 方法，例如：

// 触发自定义事件并传递数据
$(document).trigger('customEvent', ['Hello, World!']);

完整示例

下面是一个完整的示例，演示了如何在两个不同的组件之间传递数据：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 自定义事件监听传值</title>
  <script src="
</head>
<body>

<div id="component1"></div>
<div id="component2"></div>

<script>
  // 组件1
  $('#component1').on('click', function() {
    var data = 'Hello, World!';
    $(document).trigger('customEvent', [data]);
  });

  // 组件2
  $(document).on('customEvent', function(e, data) {
    $('#component2').text(data);
  });
</script>

</body>
</html>