CODEWITHSUNDEEP
javascriptjquery
Mausoleum
Mausoleum

Reputation: 441

Is this really jQuery?

And again this code:

audioElement.addEventListener('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

As far as I know "addEventListener" should be "bind" but somehow when I simply change it the whole script (there's more than these lines) doesn't work anymore...

Upvotes: 2

Views: 167

Answers (4)

Jose Faeti
Jose Faeti

Reputation: 12294

addEventListener is a method of the DOM element.

fadeOut, fadeIn and delay are jQuery methods.

If you want to use the bind method, you need a jQuery object, so it would be like

$(audioElement).bind('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

Upvotes: 3

Dave Newton
Dave Newton

Reputation: 160201

You can listen to any event, including custom ones--here the listener is attached via JavaScript; it's only the code inside the function that's jQuery.

Upvotes: 0

Guffa
Guffa

Reputation: 700382

The addEventListener is a DOM method. If you want to use the jQuery method instead, you have to wrap the DOM element in a jQuery object:

$(audioElement).bind('ended', function() {
  $('span#pause').fadeOut('slow');
  $('span#play').delay(1500).fadeIn('slow');
});

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

addEventListener works on DOM elements, while bind works on jquery objects. The event handler contains JQuery code, but addEventListener is JavaScript. You could change it to:

$(audioElement).bind('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

This makes it 'full JQuery' (which is still JavaScript) :)

Upvotes: 2

Related Questions