写例子说明js中自定义事件的使用与触发

// 创建一个新的事件类型
const myEvent = new Event('my-custom-event');

// 选择要绑定事件的目标元素
const myElement = document.getElementById('myElement');

// 添加事件监听器
myElement.addEventListener('my-custom-event', (event) => {
  console.log('自定义事件触发！', event);
  // 在这里执行事件处理逻辑
  alert("自定义事件 'my-custom-event' 触发了！");
});


// 在需要触发事件的地方，使用 dispatchEvent() 方法
function triggerCustomEvent() {
  myElement.dispatchEvent(myEvent);
}


//  更复杂的例子，传递自定义数据:

// 创建一个新的 CustomEvent，可以携带自定义数据
function triggerCustomEventWithData() {
  const eventData = {
    message: 'Hello from custom event!',
    value: 123
  };
  const myEventWithData = new CustomEvent('my-custom-event-with-data', {
    detail: eventData
  });

  myElement.dispatchEvent(myEventWithData);
}

// 监听带有数据的自定义事件
myElement.addEventListener('my-custom-event-with-data', (event) => {
  console.log('自定义事件 with data 触发！', event.detail); // 通过 event.detail 访问自定义数据
  alert(event.detail.message + " Value: " + event.detail.value);
});


// HTML 部分:
/*
<button onclick="triggerCustomEvent()">触发自定义事件</button>
<button onclick="triggerCustomEventWithData()">触发带数据的自定义事件</button>
<div id="myElement">目标元素</div>
*/


//  更实际的例子：模拟一个登录成功事件

//  假设有一个登录函数
function login(username, password) {
  //  模拟登录过程 (这里只是示例，实际应用中需要进行真正的登录验证)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username === 'admin' && password === 'password') {
        resolve({ success: true, user: { name: 'Administrator' } });
      } else {
        reject({ success: false, message: '登录失败' });
      }
    }, 500);
  });
}


//  登录按钮点击事件
const loginButton = document.getElementById('loginButton'); // 假设HTML中有id为loginButton的按钮

loginButton.addEventListener('click', async () => {
  const username = document.getElementById('username').value; // 获取用户名
  const password = document.getElementById('password').value; // 获取密码

  try {
    const loginResult = await login(username, password);
    if (loginResult.success) {
      //  登录成功，触发自定义的 'login-success' 事件
      const loginSuccessEvent = new CustomEvent('login-success', { detail: loginResult.user });
      document.dispatchEvent(loginSuccessEvent);
    } else {
      alert(loginResult.message);
    }
  } catch (error) {
    console.error("登录出错:", error);
    alert("登录出错");
  }
});

//  其他组件监听 'login-success' 事件
document.addEventListener('login-success', (event) => {
  console.log('登录成功！', event.detail);
  //  更新用户信息等操作
  alert("欢迎，" + event.detail.name + "!");
});

这个例子展示了如何创建、触发和监听自定义事件，以及如何通过 CustomEvent 传递自定义数据。 最后一个例子模拟了一个更实际的场景，演示了如何在登录成功后触发自定义事件，并在其他组件中监听该事件以执行相应的操作。 这使得代码更加模块化和易于维护。

记住要在HTML中添加必要的元素 (例如，带有myElement、loginButton、username、password ID的元素) 才能使这些例子正常工作. 这只是一个示例，你需要根据你的具体需求调整代码.