Response title
This is preview!
Move this topic
JavaScript and/or jQuery custom events
in Using jQuery
•
5 years ago
Hello,
I am developing a Controller for an MVC style custom object and I'd like to connect some sort of event handling mechanism.
It's not important what the controller is, but let's say I have a couple of events such as "happening" and "happened". Something like this:
- $(".happeningCtrl").happening(function(args) { /* something is about to happen */ });
- $(".happeningCtrl").happened(function(args) { /* something just happened */ });
Along these lines, with them being raised something like this:
- $(".happeningCtrl").happening();
- $(".happeningCtrl").happened();
Good so far?
Event driven programming is not new to me, but how JavaScript and/or jQuery approach it is somewhat new. Much of the background discussion I am finding revolves around DOM this and DOM that. However, in this case, we are talking about a custom controller, for which I would like to extend (?) a custom event or three.
Thus far I have approached it as a kind of poor man's event handler with ad-hoc JavaScript arrays of $.isFunction(...) verified handlers. Not the safest way to accept event handlers, I agree, but it will "work".
However, if there is a better way of accomplishing this using jQuery, for instance, I'd like to pursue that instead, provided the overhead isn't too steep for assuming that as a dependency.
Don't know if any of this makes sense. Can someone offer any guidance or enlighten me as to perhaps a decent tutorial around this topic?
Thanks!
1
Replies(12)
Re: JavaScript and/or jQuery custom events
5 years ago
I have no idea what you are asking from the above.
You can trigger a custom event the same way you trigger any event:
$('.some-selector).trigger('someEvent');
And you can listen for a custom event the same way you listen for any event:
binding:
$('.some-selector').on('someEvent', function() {
var $el = $(this); // It's usually convenient to get a jQuery of the triggered element
...
}
delegation: (to document, but you can delegate to any ancestor)
$(document).on('someEvent', '.some-selector', function() {
var $el = $(this);
...
});
Functions like .click() are just convenient wrappers for common events. jQuery does not create convenience wrappers for your custom events. .happening() will not work unless you create a plugin called happening, which I think would probably be silly to do. FWIW, I never use the shortcuts, because it leads to confusing code that uses shortcuts in some places, and the standard .trigger() / .on() mechanism in other.
The jQuery Learning Center is the best place for tutorials on any jQuery subject.
Leave a comment on watusiware's reply
Re: JavaScript and/or jQuery custom events
5 years ago
It’s very common to use custom events. Your syntax was a bit off.
https://jsfiddle.net/jakecigar/em173ryh/ is one way to do it.
- $.fn.happens = function() {
- var i = 1
- var $self = this
- var int = setInterval(function() {
- $self.trigger("happening", [i++])
- if (i > 100) {
- clearInterval(int)
- $self.trigger("happened")
- }
- }, 50)
- return $self
- }
- $(".happeningCtrl").happens().on({
- happening: function(e, percentage) {
- $(this).text(percentage)
- },
- happened: function(e) {
- $(this).text("happened")
- }
- })
JΛ̊KE
Leave a comment on jakecigar's reply
Re: JavaScript and/or jQuery custom events
5 years ago
Interesting, so I gather it is not as common to model custom events API along the same lines as DOM events such as "click"? i.e.
- var ctrl = new HappeningController();
- ctrl.happening(function(e) { /* it's happening */ });
- ctrl.happened(function(e) { /* it happened */ });
So, the connective wiring is basically the $.on(...) and $.trigger(...) methods?
So, externally, I connect the dots, as you illustrated here. Whereas, internally, I invoke the event via $self.trigger("happening", { some: "arguments" }).
I'm not sure I quite understand the object or objects that are acting like the event syncs, if you will. For instance, in C# that's the "event" keyword that indicates an event can be subscribed to and unsubscribed from.
In my case, I've got a Controller "class", not necessarily hanging off of the "$.fn" construct, per se.
Other than that, it's not a horrible syntax, in fact it's quite terse. I like it.
Thanks!
Leave a comment on mwpowellhtx's reply
Re: JavaScript and/or jQuery custom events
5 years ago
Assuming that I have some controller as follows:
- var HappeningController = function() {
- var $self = $(this);
- this.happeningSource = function() {
- $self.trigger("happening", ...);
- // Does something...
- $self.trigger("happened", ...);
- };
- };
And from the perspective external to the controller.
- var ctrl = $(new HappeningController());
- ctrl.on({happening: function(e) {}, happened: function(e) {}});
My Controller will trigger the events themselves, although in keeping with the $("...").click() motif, could be triggered from external sources to the controller.
That bit of syntactic sugar aside, I gather the key is in capturing the controller instance itself as a jQuery object?
What I am missing is the bit of glue, the root object from which both on and trigger happen.
Leave a comment on mwpowellhtx's reply
Re: JavaScript and/or jQuery custom events
5 years ago
.click() with no arguments just calls .trigger().
.click(function(){}); just calls .on().
They are just shortcut convenience functions, and add (a very small amount of) overhead. And there aren't even shortcuts for all of the DOM's built-in events - just the more common one.
It is more of a historical thing. jQuery has grown and morphed as the browsers have grown and morphed.
I don't use the shortcuts. They are more common in older code. .on() is newer, though before there was .bind(), and the shortcuts called .bind() instead of .on().
The underlying mechanism in the browser APIs is:
Historically, it was different in different browsers, the above is just the CURRENT standard. The historical differences are one of the reasons jQuery was created.
And even this hasn't always existed. At one time, there was no publish/subscribe mechanism at all, you had to use e.g. onclick and then your code had to do chaining if you wanted more than one listener.
jQuery has a nicer, more terse syntax, but with some performance penalty. (Of no practical significance in a typical project).
Much of jQuery, though, exists to forgive sins of the past, which are sins that current browsers no longer commit.
Leave a comment on watusiware's reply
Re: JavaScript and/or jQuery custom events
5 years ago
Most developers implementing an MVC in Javascript would use an MVC framework, rather than write their own.
Angular and React are popular.
Angular is complicated. (IMO).
They all have their own take on things, and none of them particularly look like jQuery OR the DOM APIs.
Leave a comment on watusiware's reply
Re: JavaScript and/or jQuery custom events
5 years ago
Thanks for the insight re: some of the background. Yes, I figure things like $(...).click(...) are "simply" syntactic sugar for the underlying $.on("click", '..) and $.trigger("click"). That much makes perfect sense. I am also reading about jquery special events.
Well, tangential to all this, I'd considered at a couple of instances whether a more sophisticated MVC framework might be appropriate, but at the moment, I cannot justify it, since the controllers I've approached radiate a ton of HTML themselves, as well as being potentially event syncs.
The last comment you made re: forgiveness of sins is a whole other discussion as I understand it, how much relevance jQuery really has any more these days given the state of modern browser today. I say potentially a whole lot of relevance, but I suppose it depends on how useful one finds jQuery (which I do), all things considered.
Leave a comment on mwpowellhtx's reply
Re: JavaScript and/or jQuery custom events
5 years ago
As I progress away from using jQuery in some projects. I miss the terse syntaxes. So, I write .on, .off, .trigger methods for my new ES6 classes. The idea behind ES6 classes is similar to C and JAVA type languages.
I would avoid "special" events like they show in that last link. The way it is done has changed since that old article was written.
Also I would not try to piggyback non-DOM elements into jQuery. Although it can be done. It makes for confusing code.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: JavaScript and/or jQuery custom events
5 years ago
TO;DR (Too Old, Didn't Read)
That blog post is seven years old. That is a millennium in Web Time. It talks about the long-obsolete jQuery 1.4.
Start with the jQuery Learning Center. It will teach you about the CURRENT state of jQuery. MDN is good, too, though I don't like their new page formatting. (What were they thinking?)
----
I have finally gone whole-hog ES6 on my latest hybrid mobile+desktop app project, after realizing that every platform/version we support (iOS 10, Android 6, Win10/Edge, MacOs) supports ES6.I had to adopt a new linter (ESLint) and teach it a few things...
As it's an app - not a website - I don't have to worry about it breaking if somebody at a U.S. Navy installation wanders by. (The reason Windows XP is still supported, even though it's not still supported. - unless you are the Navy)
The performance hit from jQuery is severe - and at the same time, irrelevant for most use cases on modern hardware. I like the terse syntax.
Leave a comment on watusiware's reply
Re: JavaScript and/or jQuery custom events
5 years ago
It's understandable. Yes, I saw his jQuery version and realized, this is probably way too obsolete.
Well, after digesting the state of things and so forth, I finally took a wack at my own framework agnostic event dispatcher. Loosely inspired, yet there are only so many ways to approach a terse pub/sub dispatcher.
Logging may be interesting, though, I haven't borrowed that from the OP. Prioritizing callbacks may be interesting as well, but for now it's a simple FIFO.
Bottom line is that I needed something that I could simply drop into whatever context/host I needed to support an Event Dispatcher. Something like this:
- var ctrl = new HappeningController();
- ctrl.setupEventDispatcher();
Which then I ought to be able to do stuff like this:
- ctrl.subscribeHashed({
- happening: function(sender, args) {}),
- happened: function(sender, args) {})
- });
Where sender ends up being the HappeningController instance this reference.
Anyway, glad to receive feedback.
Leave a comment on mwpowellhtx's reply
Re: JavaScript and/or jQuery custom events
5 years ago
Special events are not Custom events. They are not the same thing. jQuery is updating and finally documenting special events. But they are special - most developers will not need them.
jQuery events work perfectly well as such as they are.
There are some Javascript pubsub libraries, but somehow in 20 years of using Javascript, I've never felt compelled to use one (or even look for one until now). I just did a quick search, and found mostly Abandonware. Maybe somebody else can suggest something currently-maintained and popular. (And, yes, I've done pubsub - painfully - in C++ MFC - good riddance!)
Do you have some need for pubsub for non-GUI purposes? Bear in mind you can just trigger on document and listen on document if you need events that aren't bound to a particular DOM element.
Handing callbacks to a constructor is a bit of an old-fashioned way of doing things in JS/jQuery, and something that jQuery is moving away from. (But has to still support for compatibility). A new approach is to use promises, and it's the favored way today of using, for example, $.ajax(). Promises have the advantage that you can attach multiple handlers to the promise. Promises are BUILT IN to Javascript ES6 (if you are targeting an environment that can use ES6.)
If you are new to Javascript, you should spend a bit of time studying Javascript. It will surprise you when you dig in - it is not just a simple scripting language for gluing together It is important to understand that it is NOT an object-oriented language, though it can be corrupted into acting somewhat like one if you insist. It is a Functional, Prototype-based language, and has more in common at it's core with Lisp than it does with C++ (or C#).
I think to some degree you may be trying to fit a square peg into a round hole.
Leave a comment on watusiware's reply
Re: JavaScript and/or jQuery custom events
5 years ago
I see. Thanks for that bit of clarification. Yes, I'm looking more for framework agnostic events here, including taking the dependency on jQuery, if I can at all help it. At least where this is concerned.Special events are not Custom events. They are not the same thing. jQuery is updating and finally documenting special events. But they are special - most developers will not need them.
Yes, I started there, and it led me down the rabbit hole of, apparently, "special" events.
Yes, exactly. Not bound on a particular DOM element, but on my controller instance(s), in this case. So it would not be appropriate to have a loosy-goosy call to an event somewhere. They really do belong as a property attached to the controller (in this case) itself. Or whatever service-y object from which I might want to radiate events.Do you have some need for pubsub for non-GUI purposes?
As have I; with the help of Boost.Signals2, it's really not that difficult, and the event driven pattern itself helps to keep the thought stream very concise and well organized. As well as in MFC, as well as in Qt, and yes, definitely not for the faint of heart in places. But with the advent of C++1x and beyond, functional elements are so much more accessible to the C++ world now. Event driven isn't for everyone or for every application, but when you need it, increasingly there are ways for it to happen fairly painlessly these days. It could also be that in those 20 years, the pattern is not so sophisticated, that it is easy to land on "end of life cycle" but not so much end of utility. As I said, there are only so many ways one can approach the event driven pattern in any language, much less JavaScript.There are some Javascript pubsub libraries, but somehow in 20 years of using Javascript, I've never felt compelled to use one (or even look for one until now). I just did a quick search, and found mostly Abandonware. Maybe somebody else can suggest something currently-maintained and popular. (And, yes, I've done pubsub - painfully - in C++ MFC - good riddance!)
But I digress; somewhat OT.
Well beyond the scope of what I'm after here, but good to know, thank you.<snipped/> re: Promises/futures.
Also, good to know. I'm not sure I consider myself "seasoned veteran", per se. There are still aspects that are somewhat mysterious, like the magical "this" reference, but are becoming more and more second nature the more I dive in two or three levels deeper than the average, let's say.If you are new to Javascript, you should spend a bit of time studying Javascript. It will surprise you when you dig in - it is not just a simple scripting language for gluing together It is important to understand that it is NOT an object-oriented language, though it can be corrupted into acting somewhat like one if you insist. It is a Functional, Prototype-based language, and has more in common at it's core with Lisp than it does with C++ (or C#).
And yes, I am amazed at the power of JavaScript. Because it has "script" in the name, it is anything but. The code can be and is very structured, functional, as you said. Not object-oriented, per se, I agree; but the thing you realize is that EVERYTHING is an object, even functions and "class types", so to speak, and that elements can easily be attached at almost any moment. Which is a powerful thing, when it does not bite you, say, during a code injection attack.
Anyway, thanks for the feedback.
Leave a comment on mwpowellhtx's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to mwpowellhtx's question
Statistics
- 12 Replies
- 3827 Views
- 1 Followers