Benutzerdefiniertes Ereignis Event und CustomEvent

Benutzerdefiniertes Ereignis Event und CustomEvent

window.addEventListener() Ereignis-Listener hinzufügen

window.dispatchEvent() löst ein Ereignis aus

Event ist eine Schnittstelle der obersten Ebene, und CustomEvent basiert auf Event und fügt einige Parameter hinzu

• Ereignis

• event = new Event(typeArg, eventInit);
  

  • typeArg

  ist DOMStringein Typ, der den Namen des erstellten Ereignisses darstellt.

  • eventInit optional

  ist EventInitein Wörterbuch vom Typ, das die folgenden Felder akzeptiert:

  • "bubbles", optional, BooleanTyp, Standardwert false, gibt an, ob das Ereignis sprudelt.
  • "cancelable", optional, BooleanTyp, Standardwert false, gibt an, ob das Ereignis abgebrochen werden kann.
  • "composed", optional, BooleanTyp, Standardwert false, gibt an, ob das Ereignis Listener außerhalb des Schatten-DOM-Stammknotens auslöst.

  window.addEventListener('custom', customHandler)
  function customHandler(params) {
        
        
      // 打印事件对象 在5秒后 出现打印，可以看到我们自定义的参数
      console.log(params)
  }
  
  setTimeout(() => {
        
        
      // 创建自定义事件
      let event = new Event('custom');
      // 如果希望事件带参数，可以把参数放在事件对象上
      event.name = 'custom-name';
      event.detail = {
        
        
          age: 20
      }
      event.ppp = '这是一个锅'
  
      // dispatchEvent 返回一个 boolean 值
      let result = window.dispatchEvent(event)
      console.log(result);
  }, 5000)
  

• Benutzerdefiniertes Ereignis

  event = new CustomEvent(typeArg, customEventInit);
  

  • typeArg

  Eine Zeichenfolge, die den Namen des Ereignisses darstellt

  • customEventInit optional

  Ein Wörterbuchtypparameter mit den folgenden Feldern

  • "detail", der optionale Standardwert ist ein beliebiger Datentyp, der null ist, also ein Wert, der sich auf das Ereignis bezieht
  • Blasen Ein boolescher Wert, der angibt, ob das Ereignis Blasen bilden kann. von EventInit. Hinweis: Testchrom sprudelt standardmäßig nicht.
  • cancelable Ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann. ausEventInit

  window.addEventListener('custom', customHandler)
  function customHandler(params) {
        
        
      // 打印事件对象 在5秒后 出现打印，可以看到我们自定义的参数
      console.log(params)
  }
  setTimeout(() => {
        
        
      // 创建事件对象
      let event = new CustomEvent('Eric', {
        
        
          // 这里可直接传入 自定义的事件参数
          detail: {
        
        
              height: 100,
              widht: 100,
              rect: 10000
          }
      })
      // 同样 我们也可以直接在事件对象上绑定 参数
      event.name = 'custom-event'
      window.dispatchEvent(event)
  }, 5000)