1265622 - MediaQueryList.addListener does not support Object with handleEvent() method (convert MediaQueryListListener to EventListener)

Status: RESOLVED DUPLICATE of bug 1354441

(Core :: DOM: CSS Object Model, defect)

Description

[neil.kronlage]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36

Steps to reproduce:

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/


Actual results:

In the console, you get the following error:

TypeError: Argument 1 of MediaQueryList.addListener is not callable.


Expected results:

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/

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Looks like the spec was changed in https://hg.csswg.org/drafts/rev/ce11bd9d0293 to address https://www.w3.org/Bugs/Public/show_bug.cgi?id=25304

Comment 2

[neil.kronlage]

Looks like this works now.  Resolving.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Looks like this got fixed in bug 1354441.