addEventListener na obiekcie niestandardowym

Jeśli chcesz słuchać obiektu javascript masz trzy sposoby:

• użyj sub/pub pattern który ma wiele implementacji w javascript
• lub użyć implementacji natywnej poprzez Object get/set operators, Object.defineProperty, Object.prototype.watch lub Proxy API
• użycie Object.observe. Działa Chrome 25+(Styczeń 2014). Ale stał się deprecated w 2016

O sup / pub wzór:

Musisz opublikować wydarzenia.

O implementacjach natywnych:

• Object get/set operators Wystarczy posłuchać Dodaj, Usuń, Zmień, zdobądź wydarzenia. Operatory mają dobre wsparcie . Problemy tylko w IE8-. Ale jeśli chcesz użyć get / set w IE8 użyj Object.defineProperty ale na obiektach DOM lub użyj obiektu.defineProperty sham .
• Object.prototype.watch ma dobry ES5 polyfill.
• Proxy API potrzebuje wsparcia ES Harmony.

Obiekt.obserwuj przykład

var o = {};
Object.observe(o, function (changes) {
  changes.forEach(function (change) {
    // change.object contains changed object version
    console.log('property:', change.name, 'type:', change.type);
  });
});
o.x = 1     // property: x type: add
o.x = 2     // property: x type: update
delete o.x  // property: x type: delete

Jeśli nie potrzebujesz prawdziwych funkcji zdarzeń( takich jak bubbling, stopPropagation), możesz zaimplementować własne zdarzenia. addEventListener jest tylko API DOM, więc tak naprawdę nie potrzebujesz go dla własnych obiektów poza DOM. Jeśli chcesz utworzyć równomierny wzór wokół obiektu, oto dobry sposób, aby to zrobić, który nie wymaga żadnych dodatkowych interfejsów API przeglądarki i powinien być bardzo kompatybilny wstecz.

Powiedzmy, że masz obiekt, w którym chcesz wywołać kilka zdarzeń przy wywołaniu metody wysyłki:

var OurDispatcher, dispatcher;

OurDispatcher = (function() {
  function OurDispatcher() {
    this.dispatchHandlers = [];
  }

  OurDispatcher.prototype.on = function(eventName, handler) {
    switch (eventName) {
      case "dispatch":
        return this.dispatchHandlers.push(handler);
      case "somethingElse":
        return alert('write something for this event :)');
    }
  };

  OurDispatcher.prototype.dispatch = function() {
    var handler, i, len, ref;
    ref = this.dispatchHandlers;
    for (i = 0, len = ref.length; i < len; i++) {
      handler = ref[i];
      setTimeout(handler, 0);
    }
  };

  return OurDispatcher;

})();

dispatcher = new OurDispatcher();

dispatcher.on("dispatch", function() {
  return document.body.innerHTML += "DISPATCHED</br>";
});

dispatcher.on("dispatch", function() {
  return document.body.innerHTML += "DISPATCHED AGAIN</br>";
});

dispatcher.dispatch();

Https://jsfiddle.net/ozsywxer/

Istnieją oczywiście polyfills dla CustomEvent, ale jeśli nie potrzebuję zaawansowanych funkcji eventowych, wolę zawinąć własny system WKKW w "klasę" i rozszerzyć za jego pomocą inne klasy/funkcje.

Oto Wersja CoffeeScript, z której pochodzi JavaScript: https://jsfiddle.net/vmkkbbxq/1/

^^ trochę łatwiej zrozumieć.

Są dwa problemy.

Po pierwsze, metoda iSubmit.addEventListener() jest w rzeczywistości metodą na interfejsie EventTarget DOM:

• EventTarget
• EventTarget # addEventListener()

Są przeznaczone tylko do użycia na elementach DOM. Dodając ją do obiektu iSubmit jako metodę, wywołujesz ją na obiekcie, który nie jest EventTarget. Dlatego Chrome rzuca Uncaught TypeError: Illegal invocation błąd JavaScript.

Pierwszy problem jest krytyczny, ale jeśli możesz użyć EventTarget#addEventListener() twój kod nie zadziała, ponieważ zdarzenie jest dodawane do iSubmit, ale wysyłane z document. Ogólnie rzecz biorąc, metody tego samego obiektu muszą być używane podczas dołączania detektorów zdarzeń i wysyłania zdarzeń (chyba że używasz zdarzeń bubbling, co jest inną historią - Uwaga: bubbling nie jest ograniczony do zdarzeń związanych z JavaScript lub DOM, na przykład).

Używanie niestandardowych zdarzeń z własnymi obiektami jest bardzo normalne. Jako Evan Yu wspomniane , istnieją biblioteki do tego. Oto kilka:

• millermedeiros / js-signals
• Wolfy87 / EventEmitter

Użyłem js-signals i bardzo mi się podoba. Nigdy nie używałem Wolfy87/EventEmitter, ale ma ładny wygląd.

Twój przykład może wyglądać mniej więcej tak, jeśli użyłeś js-signals

JsFiddle

var iSubmit = {
    finished: new signals.Signal(),
    test: function test(memo) {
        this.finished.dispatch(memo || {});
    }
};

iSubmit.finished.add(function(data) {
    console.log('finished:', data);
});

iSubmit.test('this is the finished data');


// alternatively
iSubmit.finished.dispatch('this is dispatched directly from the signal');

Jeśli jesteś w węźle.środowisko js wtedy możesz użyć klasy EventEmitter węzła :

CustomObject.js

const EventEmitter = require('events');

class CustomObject extends EventEmitter {
  constructor() {
    super();
  }

  doSomething() {
    const event = {message: 'Hello World!'};
    this.emit('myEventName', event);
  }
}

module.exports = CustomObject;

Użycie:

const CustomObject = require('./CustomObject');

// 1. Create a new instance
const myObject = new CustomObject();

// 2. Subscribe to events with ID "myEventName"
myObject.on('myEventName', function(event) {
  console.log('Received event', event);
});

// 3. Trigger the event emitter
myObject.doSomething();

Jeśli chcesz użyć Eventemittera węzła poza węzłem.środowisko js, następnie możesz użyć webpack (najlepiej v2. 2 lub później), aby uzyskać pakiet CustomClass razem z EventEmitter polyfill (zbudowanym przez webpack).

Oto Jak to działa (zakładając, że zainstalowałeś webpack globalnie za pomocą npm install -g webpack):

1. Run webpack CustomObject.js bundle.js --output-library=CustomObject
2. Dołącz bundle.js do swojej strony HTML (spowoduje to wystawienie window.CustomObject)
Nie ma kroku trzeciego!

Indeks.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="bundle.js"></script>
  </head>
  <body>
    <script>
      // 1. Create a new instance
      const myObject = new window.CustomObject();

      // 2. Subscribe to events with ID "myEventName"
      myObject.on('myEventName', function(event) {
        console.log('Received event', event);
      });

      // 3. Trigger the event emitter
      myObject.doSomething();
    </script>
  </body>
</html>

Tylko spekulacje; sam nie próbowałem. Ale możesz utworzyć element atrapy i odpalić / odsłuchać zdarzenia na elemencie atrapy. Poza tym wolę chodzić bez bibliotek.

function myObject(){
    //create "dummy" element
    var dummy = document.createElement('dummy');
    //method for listening for events
    this.on = function(event, func){dummy.addEventListener(event, func);};
    //you need a way to fire events
    this.fireEvent = function(event, obj){
      dummy.dispatchEvent(new CustomEvent(event, {detail: obj}));
    }
}
//now you can use the methods in the object constructor
var obj = new myObject();
obj.on("custom", function(e){console.log(e.detail.result)});
obj.fireEvent("custom", {result: "hello world!!!"});

Ten artykuł wyjaśnia tworzenie niestandardowych zdarzeń: http://www.sitepoint.com/javascript-custom-events/

Oto przykład:

Utwórz Zdarzenie-

var event = new CustomEvent(
    "newMessage",
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

Przypisanie zdarzenia do czegoś -

document.getElementById("msgbox").dispatchEvent(event);

Subskrybuj wydarzenie -

document.addEventListener("newMessage", newMessageHandler, false);

Myślę, że możesz użyć obiektu $ Deferred i promises. To pozwoli Ci zrobić coś takiego:

Stacked: wiąże wiele programów obsługi w dowolnym miejscu aplikacji z tym samym zdarzeniem promise.

  var request = $.ajax(url);
  request.done(function () {
  console.log('Request completed');
});

// gdzie indziej w aplikacji

   request.done(function (retrievedData) {
     $('#contentPlaceholder').html(retrievedData);
   });

Zadania równoległe: poproś wiele obietnic, aby zwróciły obietnicę, która ostrzega o ich wzajemnym wypełnieniu.

$.when(taskOne, taskTwo).done(function () {
  console.log('taskOne and taskTwo are finished');
});

Zadania sekwencyjne: wykonywanie zadań w kolejności sekwencyjnej.

 var step1, step2, url;

 url = 'http://fiddle.jshell.net';

 step1 = $.ajax(url);

 step2 = step1.then(
   function (data) {
       var def = new $.Deferred();

       setTimeout(function () {
           console.log('Request completed');
           def.resolve();
       },2000);

     return def.promise();

 },
   function (err) {
       console.log('Step1 failed: Ajax request');
   }
 );
 step2.done(function () {
     console.log('Sequence completed')
     setTimeout("console.log('end')",1000);
 });

Źródło proszę.: http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt2-practical-use

Użycie: jsfiddle

Jest to naiwne podejście, ale może działać dla niektórych aplikacji:

CustomEventTarget.prototype = {

    'constructor': CustomEventTarget,

    on:   function( ev, el ) { this.eventTarget.addEventListener( ev, el ) },
    off:  function( ev, el ) { this.eventTarget.removeEventListener( ev, el ) },
    emit: function( ev ) { this.eventTarget.dispatchEvent( ev ) }

}

function CustomEventTarget() { this.eventTarget = new EventTarget }