CustomEvent & Event & dispatchEvent All In One

CustomEvent & Event & dispatchEvent All In One

js 自定义事件

CustomEvent

new CustomEvent(type)
new CustomEvent(type, options)

CustomEvent 只比 Event 多了一个 detail 属性，其他属性继承自 Event，故与 Event 用法一致！

<button id="rifle">fire 🔥</button>

<script>
// create custom events
const fire = new CustomEvent('fire', {
  detail: {
    id: '007',
    name: 'FBI'
  },
  // options ✅ 
  bubbles: true,
  cancelable: true,
  composed: true,
});

// add event listener
rifle.addEventListener('fire', (e) => {
  const {name, id} = e.detail;
  console.log(`${name}-${id} fired 🔥`, e)
});

// dispatch `fire` event
rifle.dispatchEvent(fire);
</script>

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Event

new Event(type)
new Event(type, options)

<button id="gun">fire 🔥</button>

<script>
// create event
const shot = new Event('shot', {
  bubbles: true,
  cancelable: true,
  composed: true,
});

// add event listener
gun.addEventListener('shot', (e) => {
  console.log(`gun fired 🔥`, e)
});

// dispatch `shot` event
gun.dispatchEvent(shot);
</script>

https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

postMessage

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Event Emitter

// 5.实现一个 EventEmitter类，这个类包含以下方法：
// on（监听事件，该事件可以被触发多次）
// once（也是监听事件，但只能被触发一次）
// fire（触发指定的事件）
// off（移除指定事件的某个回调方法或者所有回调方法）

class EventEmitter {
    constructor() {
        this.events = {};
    }
    on(name, callback) {
        this.events[name] = {
            callback,
            once: false,
        };
    }
    once(name, callback) {
        this.events[name] = {
            callback,
            once: true,
        };
    }
    off(name) {
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            delete this.events[name];
        }
    }
    fire(name, person) {
        // dispatchEvent
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            let fun = this.events[name].callback;
            let once = this.events[name].once;
            // pass data
            fun(person);
            if (once) {
                delete this.events[name];
            }
        }
    }
}

const event = new EventEmitter();

const log = console.log;

event.on("drink", (person) => {
    log(person + "喝水");
});

event.on("eat", (person) => {
    log(person + "吃东西");
});

event.once("buy", (person) => {
    log(person + "买东西");
});

event.fire("drink", "我");
// 我喝水
event.fire("drink", "我");
// 我喝水
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("buy", "其它人");
//其它人买东西
event.fire("buy", "其它人");
//这里不会再次触发buy事件，因为once只能触发一次

event.off("eat") //移除eat事件
event.fire("eat", "其它人");
//这里不会触发eat事件，因为已经移除了

/*
3 解题思路:

class 存储 evnets, 按类型分别处理

*/

demo

<pre id="rabbit">
  |\   /|
   \|_|/
   /. .\
  =\_Y_/=
   {>o<}
</pre>
<button onclick="hide()">Hide Rabbit</button>

<script>
  function hide() {
    let event = new CustomEvent("hide", {
      cancelable: true,
      // 没有这个标志，preventDefault 将不起作用
    });
    const returnValue = rabbit.dispatchEvent(event);
    console.log(`returnValue`, returnValue);
    if (!returnValue) {
      // 确认阻止，不隐藏，继续显示
      alert('The action was prevented by a handler');
    } else {
      // 取消阻止，隐藏
      rabbit.hidden = true;
    }
  }

  rabbit.addEventListener('hide', function(event) {
    const flag = confirm("Call event preventDefault?");
    console.log('confirm flag', flag);
    if (flag) {
      // 确定阻止
      event.preventDefault();
    }
  });
</script>

refs

https://zh.javascript.info/dispatch-events#dispatchevent

https://www.cnblogs.com/xgqfrms/p/16456780.html

https://www.cnblogs.com/xgqfrms/tag/CustomEvent/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---