自定义事件的触发 dispatchEvent 事件自定义

最新推荐文章于 2023-01-04 18:15:49 发布

林强181

最新推荐文章于 2023-01-04 18:15:49 发布

阅读量734

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qlin_11/article/details/128464546

版权

这几日遇到了消息传递的问题，需要使用自定义事件。参考了各例子和博客。其中完整代码说明的比较清晰的如下。对于时间名和数据存放位置，在代码备注中增加了说明。注意编写代码时编辑器提示 initevent被废弃了，忽略即可。新的使用方式我没查，可以查找一下。

https://blog.csdn.net/weixin_42333548/article/details/103367725
标准浏览器提供了可供元素触发的方法：element.dispatchEvent()，在使用之前，需要创建和初始化，下面是具体的用法：


 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
 
</body>
<script type="text/javascript">
    //document上绑定自定义事件oneating
    document.addEventListener('oneating', function (event) {
        alert(event.mingzi+'，'+event.message);
    }, false);
 
    //创建event的对象实例。这里的'HTMLEvents为固定代码，不修改。不为时间名
    var event = document.createEvent('HTMLEvents');
    // 3个参数：事件类型，是否冒泡，是否阻止浏览器的默认行为。时间名在init中定义
    event.initEvent("oneating", true, true);
    /*属性，随便自己定义*/
  //这里的属性为传递的数据值
    event.mingzi = 'hello,我是李小贱';
    event.message = '我今天24岁';
 
    //触发自定义事件oneating
    document.dispatchEvent(event);
</script>
</html>

林强181

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义事件的触发 dispatchEvent 事件自定义

这几日遇到了消息传递的问题，需要使用自定义事件。参考了各例子和博客。其中完整代码说明的比较清晰的如下。对于时间名和数据存放位置，在代码备注中增加了说明。注意编写代码时编辑器提示 initevent被废弃了，忽略即可。新的使用方式我没查，可以查找一下。
复制链接

扫一扫