MediaQueryList.addListener does not support Object with handleEvent() method

• Component: CSS
• Status: RESOLVED DUPLICATE

Repro:

    var query = matchMedia("(min-width: 400px)");

    var listener = {
      handleEvent: function() {
        document.body.style.background = query.matches ? 'red' : 'blue';
      }
    }

    query.addListener(listener);
    listener.handleEvent();

Runnable:  https://jsfiddle.net/j4278otv/

Running this results in the error: "[Error] TypeError: Argument 1 ('listener') to MediaQueryList.addListener must be a function"

The spec (https://drafts.csswg.org/cssom-view/#mediaquerylist) says the parameter to addListener is an EventListener (https://dom.spec.whatwg.org/#callbackdef-eventlistener): 

    callback interface EventListener {
      void handleEvent(Event event);
    };

but the implementation only allows functions.

The Node.addEventListener method does support the Object with handleEvent() method:  See https://jsfiddle.net/6nL0epf3/

[Alexey Shvayka]

*** This bug has been marked as a duplicate of bug 203288 ***