问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何实现H5自定义事件?

头像
HarmonyOS码上奇行
    12k288

    如何实现H5自定义事件

    HarmonyOSharmonyosharmonyos-next
    阅读 526
    avatarAI BotBETA

    在HTML5中，我们可以使用addEventListener方法来监听和触发自定义事件。以下是一个简单的例子：

    // 自定义事件
var myEvent = new Event('myevent');

// 触发自定义事件
document.dispatchEvent(myEvent);

// 监听自定义事件
document.addEventListener('myevent', function(e) {
  console.log('Custom event triggered!');
});

    在上述代码中，我们首先使用new Event('myevent')创建了一个新的自定义事件，然后使用dispatchEvent方法触发了这个事件。最后，我们使用addEventListener方法监听这个事件，并在控制台中打印出一条消息。

    需要注意的是，自定义事件的名称不能包含任何大写字母，不能包含任何非 ASCII 字符，并且不能包含连字符（-）。

    2 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12k288

      在H5通过EventTarget.addEventListener监听自定义事件，原生侧通过WebviewController.runJavaScript接口异步执行JavaScript代码触发事件。

      // JavaScript 
// 监听回调函数，事件触发后执行 
function loginSuccessListener(event){ 
  // ... 
} 
// 注册 loginSuccess 事件监听 
document.addEventListener("loginSuccess",loginSuccessListener) 
 
// ArkTS 
// 原生使用 WebViewController.runJavaScript() 接口调用 JavaScript EventTarget.dispatchEvent() 触发 loginSuccess 事件 
this.webviewController.runJavaScript(`const loginSuccessEvent = new CustomEvent("loginSucces", {detail: "success"}); 
document.dispatchEvent(loginSuccessEvent);`);

      参考链接

      应用侧调用前端页面函数

      头像
      linong
        29.2k1266132
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题