What is the addListener function for?

Asked

Viewed 246 times

-6

I know how to use the addEventListener, but I don’t know what the addListener, I searched and found no specification on this function.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function myFunction(x) {
  if (x.matches) {
    window.alert("f");
  } else {
   window.alert("a");
  }
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x)
x.addListener(myFunction)
</script>
</body>
</html>

What addListener Are you doing this piece of code? and what is it for?

javascript
  • 1

    That: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

  • 1

    The addListener() method of the Mediaquerylist interface adds a listener to Mediaquerylistener who will perform a custom callback function in response to changing the status of the media query.

  • Thank you very much helped

  • @Maurydeveloper Pq you do not post a reply instead of comment?

  • @Sam wanted to see if my answer was right. I hate bad answers.

  • 1

    @Maurydeveloper vc simply copied the translated text from https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

  • I put the fountain. Don’t worry,.

Show 2 more comments

1 answer

0


Hello.

Mediaquerylist.addListener()

The method addListener() of the Mediaquerylist interface adds a listener to the Mediaquerylistener who will perform a custom callback function in response to changing the status of the media query.

This is basically an alias for EventTarget.addEventListener(), for compatibility with previous versions. Older browsers should use addListener instead of addEventListener, because Mediaquerylist only inherits from Eventtarget in newer browsers.

Syntax

MediaQueryList.addListener(func)

Parameter

func: A function or function reference representing the callback function you want to run when the media query status is changed.

This method does not return any value.

Example

var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);

Compatible browsers

  • Chrome +9
  • Microsoft Edge
  • Firefox +6
  • Opera +12.1
  • Safari +5

Source

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

https://stackoverflow.com/questions/37086372/how-does-addlistener-work-with-matchmedia-api

  • 3

    I’ll give you a -1 for simply copying a text instead of writing in your own words explaining how the function works. Quoting the source is always good, but explaining with your own words, if you know the subject, it is the ideal.

  • @Sam Sorry, will I add my word and you edit? I’m bad at English.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.