javaScript自定义事件CustomEvent详解（二）intEvent 和 intiCustomEvent 的区别，及新式写法和老式写法的区别

最新推荐文章于 2024-07-02 09:19:09 发布

Awen_liang1002

最新推荐文章于 2024-07-02 09:19:09 发布

阅读量5.2k

点赞数 2

分类专栏： javaScript DOM3 文章标签： DOM3 javascript

本文链接：https://blog.csdn.net/weixin_37615202/article/details/77450986

版权

javaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

DOM3

2 篇文章 0 订阅

订阅专栏

javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的，其实通过javascript我们可以在任何时刻触发特定的事件，并且这些事件与浏览器创建的事件是相同的。

通过createEvent方法，我们可以创建新的Event对象，这个方法接受一个参数eventType，即想获取的Event对象的事件模板名，其值可以为HTMLEvents、MouseEvents、UIEvents以及CustomEvent(自定义事件)。这里我们将以CustomEvent为例子进行讲解

首先创建自定义事件对象

var event = document.createEvent("CustomEvent");

然后初始化事件对象

event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

其中，第一个参数为要处理的事件名
第二个参数为表明事件是否冒泡
第三个参数为表明是否可以取消事件的默认行为
第四个参数为细节参数
例如：event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test，事件冒泡，可以取消事件的默认行为，细节参数为一个对象{a:"test", b:"success"}

最后触发事件对象

document.dispatchEvent(event);

当然我们需要定义监控test事件的处理程序

document.addEventListener("test", function(e){
    var obj = e.detail;
    alert(obj.a + "  " + obj.b);
});

最后会弹出框显示"test success"

但不是所有的浏览器都支持，尤其是移动端，下面分享一个封装好的函数，来解决：

(function() {
    if (typeof window.CustomEvent === 'undefined') {
        function CustomEvent(event, params) {
            params = params || {
                bubbles: false,
                cancelable: false,
                detail: undefined
            };
            var evt = document.createEvent('Events');
            var bubbles = true;
            for (var name in params) {
                (name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
            }
            evt.initEvent(event, bubbles, true);
            return evt;
        };
        CustomEvent.prototype = window.Event.prototype;
        window.CustomEvent = CustomEvent;
    }
})();

触发如下：

document.dispatchEvent(event);

还有另外一种写法，下面来分享一下：

if (!window.CustomEvent) {
        window.CustomEvent = function(type, config) {
            config = config || { bubbles: false, cancelable: false, detail: undefined};
            var e = document.createEvent('CustomEvent');
            e.initCustomEvent(type, config.bubbles, config.cancelable, config.detail);
            return e;
        };
        window.CustomEvent.prototype = window.Event.prototype;
    }

触发的时候，把触发封装到一个函数中：

var dispatch = function(event) {
        var e = new CustomEvent(event, {
            bubbles: true,
            cancelable: true
        });
        //noinspection JSUnresolvedFunction
        window.dispatchEvent(e);
 };

下面是一个例子：

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
  .button {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      margin: 20px;
      text-align: center;
      line-height: 200px;
  }
</style>
</head>
<body>
<div class="button">Button</div>

<script>
  "use strict";
  var btn = document.querySelector('.button');

  var ev = new CustomEvent('test', {
      bubbles: 'true',
      cancelable: 'true',
      detail: 'tcstory'
  });
  btn.addEventListener('test', function (event) {
      console.log(event.bubbles);
      console.log(event.cancelable);
      console.log(event.detail);
  }, false);
  btn.dispatchEvent(ev);
</script>
</body>
</html>

效果如下图