Custom Event

Custom Event

创建自定义事件

  • document.createEvent()

    通过 document.createEvent() 创建事件对象,然后通过 Event.initEvent() 进行初始化。

    1
    2
    3
    4
    // DOM_event_class:
    const event = document.createEvent(DOM_event_class);

    event.initEvent(EventType, bubbles, cancelable);
    1
    2
    3
    4
    5
    6
    7
    8
    const event = document.createEvent('Event');
    event.initEvent(EventType, true, true);

    // 添加事件监听
    ele.addEventListener(EventType, () => {}, false);

    // 触发事件
    ele.dispatchEvent(event);

    DOM Event 子类:DOM_event_subclass

    DOM Level 2 Events 中已经淘汰了这种创建事件的方式

  • new Event()

    Event 表示在 DOM 中发生的任何事件,可以是用户生成的(如:鼠标、键盘事件等),也可以其他 API 生成的(如:动画完成事件等)。事件可以由外部触发,也可以通过程序触发,如:ele.click(),或通过定义事件,然后使用 EventTarget.dispatchEvent() 将其派到指定目标。

    1
    event = new Event(type [, eventInitDict])

    • cancelable:事件是否可以取消
    • composed:事件是否可以在阴影 DOM 和常规 DOM 之间的边界上浮动
    • eventPhase:事件流处于哪个阶段
    • isTrusted:事件是否是由浏览器(当用户点击实例后)或者由脚本(使用事件的创建方法,例如event.initEvent)启动
    1
    2
    3
    4
    5
    6
    7
    const event = new Event(EventType);

    // 添加事件监听
    ele.addEventListener(EventType, () => {}, false);

    // 触发事件
    ele.dispatchEvent(event);
  • new CustomEvent()

    CustomEvent 继承 Event

    1
    event = new CustomEvent(type [, customEventInitDict])

    customEventInitDict 相比 eventInitDict 多了 detail 属性,用于传递自定义的事件数据

    1
    2
    3
    4
    5
    6
    7
    const event = new CustomEvent(EventType, { detail: ele.dataset.time });

    // 添加事件监听
    ele.addEventListener(EventType, () => {}, false);

    // 触发事件
    ele.dispatchEvent(event);

    CustomEvent 不支持 IE 9 及以下版本,可以考虑 polyfill;另外,在 IE9 ~ IE 11 中 CustomEvent 不能作为构造函数,只能通过 document.createEvent('CustomEvent') 替代

Demo

  • 触发 checkbox 点击事件

    Demo

    1
    2
    3
    4
    5
    6
    const simulateClick = () => {
    const event = new MouseEvent('click');

    const ele = document.getElementById('checkbox');
    ele.dispatchEvent(event);
    }