Jquery Equivalent of JavaScript's Addeventlistener Method

jQuery equivalent of JavaScript's addEventListener method

Not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included.

The nearest to what you are looking for in jQuery is using bind() (superseded by on() in jQuery 1.7+) or the event-specific jQuery methods (in this case, click(), which calls bind() internally anyway). All use the bubbling phase of a raised event.

addEventListener in jQuery

Try this

// Setting the third argument to false will attach a function
// that prevents the default action from occurring and 
// stops the event from bubbling.
$("#element1").bind("click", doSomething2, false);

jQuery addEventListener not supported

You need to use on() if you are using jQuery,

And to get seeking and currentTime you need to use [0] to access these properties (So Javascript Version is better, when you want to access the element properties directly.)

var vid = $("#divVideo");
var suptime = 0;
vid.on('timeupdate', function(){
    if (!vid[0].seeking){ // to get seeking use [0], when using jquery object
        suptime = vid[0].currentTime;
    }
}).on('seeking', function(){ // chaining is better to use here
    var delta = vid[0].currentTime - suptime;
    if (Math.abs(delta) > 0.01) {
        vid[0].currentTime = suptime;
    }
});

Without jQuery, if you want to use addEventListener then try to use getElementById() like,

var vid = document.getElementById("divVideo");
var suptime = 0;
vid.addEventListener('timeupdate', function(){
    if (!vid.seeking){ // directly seeking and currentTime are accessible
        suptime = vid.currentTime;
    }
});
vid.addEventListener('seeking', function(){
    var delta = vid.currentTime - suptime;
    if (Math.abs(delta) > 0.01) {
        vid.currentTime = suptime;
    }
});

How to use jQuery to add event listener and call function?

In your case use the following:

$(document).on('click', '.closeBtn', myFunc);

//$(parent).on('event', '.class', callbackfucntion);

jQuery .on(); vs JavaScript .addEventListener();

When you use .on() at the document level, you're waiting for the event to bubble all the way up to that point. The event handler for any intermediate container will already have been called.

Event "bubbling" is the process by which the browser looks for event handlers registered with parents of the element that was the actual original recipient of the event. It works upwards in the DOM tree. The document level is the last level checked. Thus, your handler registered with .on() won't run until that level is reached. In the meantime, the other event handler at the "outer" level is reached first and it is executed by the browser.

Thus, that return false; in the handler registered with .on() is pretty much useless, as would be a call to event.stopPropagation(). Beyond that, mixing native event handler registration with the work that a library like jQuery will do is probably a really bad idea unless you seriously know what you're doing.

There was a question asked almost exactly like this one just a little while ago today.

Add an event listener in jQuery

Use on:

$("#aa").on("paste", pasteHandler);

.on( events [, selector ] [, data ], handler(eventObject) )

Description: Attach an event handler function for one or more events to the selected elements.

Also, you can access the DOM element using $("#aa")[0] and then:

$("#aa")[0].addEventListener("paste", pasteHandler);

But that's useless because you can use the built-in jQuery method.

Equivalent of attaching a listener to buttons on document ready in jQuery instead of vanilla JavaScript?

Running something when the document is ready is handled by the $( document ).ready() method.

getElementByClassName can be replaced by a Class Selector (".class")

Your for loop can be removed because with jQuery methods all are called on each returned element.

addEventListener can be replaced by .click().

Then your code is just three lines long:

$(function(){
    $('.btn-danger').click(removeCartItem)
})

Javascript Equivalent of Jquery

Use the DOMContentLoaded event as follow:

document.addEventListener("DOMContentLoaded", function(event) {  console.log("DOM fully loaded and parsed");  var btns = document.querySelectorAll("input[type=button]");  for (let i = 0; i < btns.length; i++) {    btns[i].addEventListener("click", function() {      //Do stuff      console.log("button" + i +  "clicked");    });  }});

Javascript equivalent function for jquery .on() function

You could make your own function. For IE9+:

function on(selector, event, handler) {
    [].forEach.call(document.querySelectorAll(selector), function(node) {
        node.addEventListener(event, handler, false);
    });
}

Usage:

on('.class', 'DOMNodeRemoved', function(){/*blah*/});

---

Related Topics